/* rules.html — console page styles. Shared primitives stay in style.css;
   this file owns the list + drawer + badges + test bench + recs + effectiveness. */

/* ===== Rule-type badge ===== */
.rule-type-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  padding: 2px var(--s-8);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.rule-type-badge i { font-size: 10px; }
.rule-type-cache {
  background: var(--hover-bg);
  color: var(--accent);
}
.rule-type-invalidation {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}
html.dark-mode .rule-type-invalidation {
  background: rgba(59, 130, 246, 0.18);
  color: #60a5fa;
}

/* ===== Coverage banner ===== */
.rules-coverage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 2fr);
  gap: var(--s-16);
  margin-bottom: var(--s-16);
}
.coverage-tile {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-16) var(--s-24);
  box-shadow: 0 2px 8px var(--shadow);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.coverage-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.coverage-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.coverage-value.warn  { color: var(--accent); }
.coverage-value.good  { color: #16a34a; }
.coverage-value.muted { color: var(--muted); }
.coverage-trend { font-size: 12px; color: var(--muted); }

.coverage-gaps {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-16);
  box-shadow: 0 2px 8px var(--shadow);
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  min-width: 0;
}
.coverage-gaps-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-strong);
}
.coverage-gap-row {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-8) var(--s-12);
  border-radius: 8px;
  background: var(--hover-bg);
  font-size: 13px;
  color: var(--text);
}
.coverage-gap-row + .coverage-gap-row { margin-top: var(--s-4); }
.coverage-gap-rule { font-weight: 600; color: var(--text-strong); }
.coverage-gap-cta  {
  margin-left: auto;
  color: var(--accent);
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
  cursor: pointer;
}
.coverage-gap-cta:hover { color: var(--accent-hover); }
.coverage-gaps-empty { color: var(--muted); font-size: 13px; padding: var(--s-4) var(--s-8); }

/* ===== Rule list ===== */
.rules-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-12);
  margin-bottom: var(--s-12);
}
.rules-list-head .btn { flex-shrink: 0; }

.rules-list {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px var(--shadow);
  overflow: hidden;
}
.rules-list-empty {
  padding: var(--s-32) var(--s-24);
  text-align: center;
  color: var(--muted);
}
.rule-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1.6fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: var(--s-16);
  padding: var(--s-12) var(--s-16);
  cursor: pointer;
  transition: background var(--motion);
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.rules-list .rule-row:last-child { border-bottom: none; }
.rule-row:hover { background: var(--hover-bg); }
.rule-row.disabled { opacity: 0.55; }
.rule-row.highlight {
  border-left-color: var(--accent);
  background: var(--hover-bg);
}
.rule-priority {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}
.rule-identity { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.rule-name-row { display: flex; align-items: center; gap: var(--s-8); min-width: 0; }
.rule-name {
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rule-description {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rule-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  font-size: 12px;
  color: var(--muted);
  min-width: 0;
}
.rule-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  padding: 2px var(--s-8);
  background: var(--code-bg);
  border-radius: 6px;
  color: var(--text);
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rule-meta-warn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  padding: 2px var(--s-8);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}
.rule-meta-warn.kind-uncovered { background: rgba(245, 158, 11, 0.15); color: #d97706; }
.rule-meta-warn.kind-shadowed,
.rule-meta-warn.kind-duplicate,
.rule-meta-warn.kind-dangling,
.rule-meta-warn.kind-priorityConflict { background: rgba(220, 38, 38, 0.12); color: #dc2626; }
.rule-meta-warn a { color: inherit; text-decoration: underline; }
.rule-targets { font-size: 11px; color: var(--muted); }
.rule-targets a { color: var(--accent); font-weight: 600; }
.rule-targets a:hover { color: var(--accent-hover); }
.rule-row-actions { display: flex; align-items: center; gap: var(--s-8); flex-shrink: 0; }

/* Safe-fix banner across the top of the list. */
.safe-fixes-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-12);
  padding: var(--s-12) var(--s-16);
  border-radius: var(--radius);
  background: var(--hover-bg);
  border: 1px solid var(--accent);
  margin-bottom: var(--s-12);
  font-size: 13px;
}
.safe-fixes-banner i { color: var(--accent); }

/* Split button for Add rule. */
.split-btn {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  overflow: hidden;
}
.split-btn > button,
.split-btn > .split-btn-dropdown > button {
  background: var(--accent-gradient);
  color: #fff;
  padding: var(--s-8) var(--s-16);
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  transition: var(--motion);
}
.split-btn > button:hover { filter: brightness(1.08); }
.split-btn > .split-btn-dropdown { position: relative; border-left: 1px solid rgba(255,255,255,0.25); }
.split-btn-dropdown > button { padding: var(--s-8) var(--s-12); }
.split-btn-menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--s-4));
  min-width: 220px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px var(--shadow-strong);
  padding: var(--s-4);
  z-index: 40;
  animation: popover-in 160ms var(--ease);
}
.split-btn-menu[hidden] { display: none; }
.split-btn-menu button {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  width: 100%;
  padding: var(--s-8) var(--s-12);
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 14px;
  text-align: left;
  border-radius: 8px;
  transition: var(--motion);
  cursor: pointer;
}
.split-btn-menu button:hover { background: var(--hover-bg); color: var(--accent); }

/* Drawer chrome lives in style.css (.app-drawer-*). Rules-specific bits
   (form/json panes, drawer fields) stay below. */

.drawer-field { display: flex; flex-direction: column; gap: var(--s-4); }
.drawer-field-label { font-size: 12px; font-weight: 600; color: var(--text-strong); letter-spacing: 0.02em; }
.drawer-field-hint  { font-size: 12px; color: var(--muted); }
.drawer-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); }
.drawer-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-8);
  padding: var(--s-12);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
}
.drawer-check-item {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.drawer-pair-offer {
  padding: var(--s-12);
  background: var(--hover-bg);
  border: 1px dashed var(--accent);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  font-size: 13px;
}
.drawer-pair-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-12);
}
.drawer-pair-row > i { flex-shrink: 0; padding-top: 2px; }
.drawer-pair-text { flex: 1; line-height: 1.5; color: var(--text); }
.drawer-pair-text strong { color: var(--text-strong); }

.drawer-pair-preview { display: flex; flex-direction: column; }
.drawer-pair-preview[hidden] { display: none; }
.pair-preview-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--s-12);
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}
.pair-preview-head {
  display: flex;
  align-items: center;
  gap: var(--s-8);
}
.pair-preview-name {
  font-weight: 700;
  color: var(--text-strong);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pair-preview-prio {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: "SF Mono", Menlo, Consolas, monospace;
}
.pair-preview-id code {
  font-size: 11px;
  color: var(--muted);
  font-family: "SF Mono", Menlo, Consolas, monospace;
}
.pair-preview-row {
  display: flex;
  align-items: baseline;
  gap: var(--s-8);
  font-size: 12px;
  color: var(--text);
}
.pair-preview-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 90px;
  flex-shrink: 0;
}
/* Symmetric tab switcher at the top of the form pane when pair is on. */
.pair-tabs {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.pair-tab {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-8) var(--s-12);
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: var(--motion);
  flex: 1;
  min-width: 0;
}
.pair-tab:hover { background: var(--hover-bg); color: var(--text); }
.pair-tab.active {
  background: var(--card-bg);
  color: var(--text-strong);
  box-shadow: 0 1px 3px var(--shadow);
}
.pair-tab-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  font-weight: 600;
}
.pair-tabs-note {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 var(--s-8);
  flex-shrink: 0;
}

/* ===== Test bench ===== */
.test-bench-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-12);
  margin-bottom: var(--s-12);
}
.test-bench details { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card-bg); box-shadow: 0 2px 8px var(--shadow); }
.test-bench summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-16) var(--s-24);
  display: flex;
  align-items: center;
  gap: var(--s-12);
  font-weight: 600;
  color: var(--text-strong);
}
.test-bench summary::-webkit-details-marker { display: none; }
.test-bench summary i.chevron { transition: transform var(--motion); }
.test-bench details[open] summary i.chevron { transform: rotate(90deg); }
.test-bench-body { padding: 0 var(--s-24) var(--s-24); display: flex; flex-direction: column; gap: var(--s-12); }
.test-bench textarea {
  min-height: 120px;
  width: 100%;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  padding: var(--s-12);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text);
  resize: vertical;
}
.test-bench-disclaimer {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}
.test-bench-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-8);
  padding: var(--s-12);
  background: var(--code-bg);
  border-radius: var(--radius);
  font-size: 13px;
}
.test-bench-meta-row {
  display: flex;
  gap: var(--s-8);
  align-items: baseline;
}
.test-bench-meta-key { color: var(--muted); min-width: 90px; font-size: 12px; }
.test-bench-meta-val { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12px; color: var(--text-strong); word-break: break-word; }
.test-bench-verdict {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding: var(--s-16);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.test-bench-verdict.cache { border-color: var(--accent); background: var(--hover-bg); }
.test-bench-verdict.invalidate { border-color: #3b82f6; background: rgba(59, 130, 246, 0.08); }
.test-bench-verdict.no-match,
.test-bench-verdict.no-invalidation,
.test-bench-verdict.bypass { border-color: var(--border); background: var(--code-bg); }
.test-bench-verdict-head {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  font-weight: 700;
  color: var(--text-strong);
}
.test-bench-verdict-body { font-size: 13px; color: var(--text); }
.test-bench-link {
  font-size: 12px;
  color: var(--muted);
  font-family: "SF Mono", Menlo, Consolas, monospace;
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
}
.test-bench-link a { color: var(--accent); }

/* ===== AI recommendations ===== */
.rec-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-16);
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}
.rec-card + .rec-card { margin-top: var(--s-12); }
.rec-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-12);
}
.rec-card-title { font-weight: 600; color: var(--text-strong); }
.rec-card-sql {
  padding: var(--s-12);
  background: var(--code-bg);
  border-radius: 8px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--text);
  max-height: 140px;
  overflow: auto;
}
.rec-card-actions { display: flex; gap: var(--s-8); justify-content: flex-end; }

/* ===== Recommendations panel — sub-sections + accordion query lists.
   Action-row primitives (.opp-action-row etc.) and per-query .rec-card
   live elsewhere (style.css and above). ===== */
.recs-section + .recs-section { margin-top: var(--s-24); }
.recs-section-title {
  margin: 0 0 var(--s-12) 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.recs-query-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding: var(--s-12) 0 0 var(--s-32);
}

/* ===== Effectiveness table ===== */
.eff-table { width: 100%; border-collapse: collapse; }
.eff-table th {
  text-align: left;
  padding: var(--s-8) var(--s-12);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
}
.eff-table th.sorted { color: var(--accent); }
.eff-table td {
  padding: var(--s-8) var(--s-12);
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.eff-table td.num { font-variant-numeric: tabular-nums; text-align: right; }
.eff-rule-name { font-weight: 600; color: var(--text-strong); }

/* ===== Templates ===== */
.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-12);
}
.template-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-16);
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  transition: var(--motion);
  cursor: pointer;
}
.template-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 8px 20px var(--shadow-strong);
}
.template-card-title { font-weight: 700; color: var(--text-strong); font-size: 14px; }
.template-card-desc { font-size: 13px; color: var(--muted); line-height: 1.5; }
.template-card-tags { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: auto; }
.template-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px var(--s-8);
  background: var(--code-bg);
  color: var(--muted);
  border-radius: 999px;
}

/* ===== JSON editor (escape hatch) ===== */
.json-escape {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}
.json-escape textarea {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  padding: var(--s-12);
  min-height: 360px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text);
  width: 100%;
  resize: vertical;
}
.json-escape-err {
  color: #dc2626;
  font-size: 13px;
  padding: var(--s-8) var(--s-12);
  background: rgba(220, 38, 38, 0.08);
  border-radius: 6px;
}

/* ===== Two-pane drawer (AIR-1236) =====
   The base drawer is single-column at 520px. Two-pane mode widens it and
   splits the body into a form column (left) and a live-JSON column (right).
   Outside .app-drawer-twopane, the drawer keeps its original shape. */
.app-drawer.app-drawer-twopane { width: min(1100px, 96vw); }
.app-drawer-body.two-pane {
  flex-direction: row;
  padding: 0;
  gap: 0;
}
.drawer-pane {
  flex: 1 1 50%;
  min-width: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.drawer-pane-form {
  padding: var(--s-24);
  gap: var(--s-16);
  display: flex;
  flex-direction: column;
}
.drawer-pane-json {
  border-left: 1px solid var(--border);
  background: var(--code-bg);
}
.drawer-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-12) var(--s-16);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--card-bg);
}
.drawer-pane-status { font-weight: 600; font-size: 11px; letter-spacing: 0.02em; }
.drawer-pane-status.editing { color: var(--accent); }
.drawer-pane-status.err { color: #dc2626; }

.json-pane-editor {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* jsoneditor's root element. Let it fill the pane and respect dark mode. */
.json-pane-editor > .jsoneditor {
  flex: 1;
  border: none;
  min-height: 0;
}
html.dark-mode .json-pane-editor > .jsoneditor {
  background: var(--code-bg);
  color: var(--text);
}
html.dark-mode .json-pane-editor .jsoneditor-menu {
  background: var(--card-bg);
  border-bottom-color: var(--border);
}
html.dark-mode .json-pane-editor .jsoneditor-navigation-bar {
  background: var(--code-bg);
  color: var(--muted);
  border-bottom-color: var(--border);
}
html.dark-mode .json-pane-editor .jsoneditor-tree,
html.dark-mode .json-pane-editor .jsoneditor textarea.jsoneditor-text {
  background: var(--bg);
  color: var(--text);
}
html.dark-mode .json-pane-editor div.jsoneditor-field,
html.dark-mode .json-pane-editor div.jsoneditor-value { color: var(--text); }
html.dark-mode .json-pane-editor div.jsoneditor-value.jsoneditor-string { color: #86d775; }
html.dark-mode .json-pane-editor div.jsoneditor-value.jsoneditor-number { color: #f59e0b; }
html.dark-mode .json-pane-editor div.jsoneditor-value.jsoneditor-boolean,
html.dark-mode .json-pane-editor div.jsoneditor-value.jsoneditor-null { color: #60a5fa; }

/* Section grouping inside the form pane. */
.drawer-section {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  padding: var(--s-12);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
}
.drawer-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ===== Live match indicator (AIR-1236, item B) =====
   Sits at the top of the form pane. The SQL textarea is plain; the indicator
   block below shows ✓/✗ + per-condition chips. */
.match-section { background: var(--code-bg); }
.match-sql-input {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
}
.match-indicator { display: flex; flex-direction: column; gap: var(--s-8); }
.match-row {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-8) var(--s-12);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}
.match-row.ok   { background: rgba(22, 163, 74, 0.12);  color: #15803d; }
.match-row.bad  { background: rgba(220, 38, 38, 0.10);  color: #b91c1c; }
.match-row.warn { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.match-row.muted { background: var(--card-bg); color: var(--muted); font-weight: 500; }
.match-row strong { font-family: inherit; }
.match-chips { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.cond-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  padding: 2px var(--s-8);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
}
.cond-chip.ok  { background: rgba(22, 163, 74, 0.15); color: #15803d; }
.cond-chip.bad { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }
html.dark-mode .match-row.ok   { color: #4ade80; }
html.dark-mode .match-row.bad  { color: #f87171; }
html.dark-mode .match-row.warn { color: #fbbf24; }
html.dark-mode .cond-chip.ok   { color: #4ade80; }
html.dark-mode .cond-chip.bad  { color: #f87171; }

/* Conflicts block — one warn row per detected conflict with the rest of the
   rule set. Sits below the match verdict + invalidates preview. */
.match-conflicts { display: flex; flex-direction: column; gap: var(--s-4); }

/* "Will invalidate" row inside the indicator on invalidation rules. */
.match-invalidates { align-items: flex-start; flex-wrap: wrap; }
.match-invalidates-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.match-invalidates-chips { flex: 1; min-width: 0; }

/* Verdict-action button row (test bench "Draft this rule" CTA). */
.verdict-actions { margin-top: var(--s-12); display: flex; gap: var(--s-8); }

/* ===== Match-mode toggle ===== */
.mode-toggle {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  overflow: hidden;
  width: max-content;
}
.mode-toggle button {
  background: transparent;
  border: none;
  padding: var(--s-8) var(--s-16);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: var(--motion);
}
.mode-toggle button + button { border-left: 1px solid var(--border-strong); }
.mode-toggle button.active { background: var(--accent); color: #fff; }
.mode-toggle button:not(.active):hover { background: var(--hover-bg); color: var(--text); }

/* ===== Statement-type pills ===== */
.pill-row { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.pill {
  padding: var(--s-4) var(--s-12);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: var(--motion);
}
.pill:hover { color: var(--text); border-color: var(--accent); }
.pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ===== Operator picker + value input ===== */
.cond-field { gap: var(--s-8); }
.cond-row {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s-8);
  align-items: stretch;
}
.op-picker { position: relative; }
.op-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-8) var(--s-12);
  background: var(--code-bg);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text);
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--motion);
  white-space: nowrap;
}
.op-chip:hover { border-color: var(--accent); color: var(--accent); }
.op-chip i { font-size: 9px; }
.op-menu {
  position: absolute;
  top: calc(100% + var(--s-4));
  left: 0;
  min-width: 180px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px var(--shadow-strong);
  padding: var(--s-4);
  z-index: 140;
  display: flex;
  flex-direction: column;
}
.op-menu[hidden] { display: none; }
.op-menu button {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-12);
  padding: var(--s-8) var(--s-12);
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--motion);
}
.op-menu button:hover { background: var(--hover-bg); }
.op-menu button.active { background: var(--hover-bg); color: var(--accent); }
.op-menu-label { font-weight: 600; }
.op-menu-name { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 11px; color: var(--muted); }

.cond-value { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.cond-value .input { width: 100%; }

/* Chip-list value input — used by `in` / `includesAny`. */
.chip-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-8);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--input-bg);
  min-height: 36px;
}
.chip-input-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  padding: 2px var(--s-4) 2px var(--s-8);
  background: var(--hover-bg);
  color: var(--accent);
  border-radius: 4px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
}
.chip-input-chip button {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 var(--s-4);
  opacity: 0.6;
}
.chip-input-chip button:hover { opacity: 1; }
.chip-input-text {
  flex: 1;
  min-width: 80px;
  background: transparent;
  border: none;
  outline: none;
  font-size: 13px;
  color: var(--text);
  padding: var(--s-4);
}

.regex-validity {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
}
.regex-validity.ok  { color: #16a34a; }
.regex-validity.bad { color: #dc2626; }

/* ===== Templates intents (promoted row above the rules list) ===== */
.templates-intents { display: flex; flex-direction: column; gap: var(--s-16); }
.templates-intents-head { display: flex; align-items: baseline; gap: var(--s-12); flex-wrap: wrap; }
.templates-intents-head h2 { margin: 0; font-size: 18px; color: var(--text-strong); }
.intent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-12);
}
.intent-tile {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-16);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  transition: var(--motion);
  min-height: 130px;
}
.intent-tile:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--shadow-strong);
}
.intent-tile-icon {
  font-size: 20px;
  color: var(--accent);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hover-bg);
  border-radius: 8px;
  flex-shrink: 0;
}
.intent-tile-label { font-weight: 700; color: var(--text-strong); font-size: 14px; }
.intent-tile-blurb { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* Per-intent preview block at the bottom of each tile. Each intent gets a
   different SQL/chip shape so the tile row isn't visually interchangeable. */
.intent-tile-preview {
  margin-top: auto;
  padding-top: var(--s-8);
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
}
.tile-code {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--muted);
  background: var(--code-bg);
  padding: var(--s-4) var(--s-8);
  border-radius: 4px;
  width: 100%;
  white-space: pre-wrap;
  line-height: 1.5;
}
.tile-code em { color: var(--accent); font-style: normal; font-weight: 700; }
.tile-code-block { border-left: 3px solid #dc2626; padding-left: var(--s-8); }
.tile-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px var(--s-8);
  background: var(--hover-bg);
  color: var(--accent);
  border-radius: 999px;
}
.tile-chip.alt {
  background: rgba(59, 130, 246, 0.10);
  color: #3b82f6;
}
.tile-chip.stop {
  background: rgba(220, 38, 38, 0.10);
  color: #dc2626;
}
html.dark-mode .tile-chip.alt { color: #60a5fa; }
html.dark-mode .tile-chip.stop { color: #f87171; }

.intent-tile-blank { border-style: dashed; }
.intent-tile-blank .intent-tile-icon { background: transparent; color: var(--muted); }
.intent-tile-blank:hover .intent-tile-icon { color: var(--accent); }
.intent-tile-blank .intent-tile-preview { display: none; }

.templates-overflow { border-top: 1px solid var(--border); padding-top: var(--s-12); }
.templates-overflow > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  padding: var(--s-4) 0;
}
.templates-overflow > summary::-webkit-details-marker { display: none; }
.templates-overflow > summary i.chevron { transition: transform var(--motion); }
.templates-overflow[open] > summary i.chevron { transform: rotate(90deg); }
.templates-overflow > .templates-grid { margin-top: var(--s-12); }

/* ===== Skeleton loader ===== */
.skel-icon { height: 36px; width: 36px; border-radius: 8px; flex-shrink: 0; }
.skel-h2   { height: 20px; width: 180px; }
.skel-btn  { height: 32px; border-radius: 6px; }

.rules-skel-tile {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-16);
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  min-height: 130px;
}

.rules-skel-list {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding: var(--s-12) var(--s-16);
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .rules-coverage { grid-template-columns: 1fr 1fr; }
  .rules-coverage .coverage-gaps { grid-column: 1 / -1; }
  .rule-row { grid-template-columns: 40px 1fr auto; }
  .rule-meta { grid-column: 2 / 4; margin-top: var(--s-4); }
  .rule-row-actions { grid-column: 3; }
  .rule-priority { font-size: 12px; }
  .test-bench-meta { grid-template-columns: 1fr; }
  /* Two-pane drawer stacks vertically on narrow viewports — form first,
     JSON below. Each pane scrolls independently. */
  .app-drawer.app-drawer-twopane { width: 100vw; }
  .app-drawer-body.two-pane { flex-direction: column; }
  .drawer-pane-json { border-left: none; border-top: 1px solid var(--border); min-height: 280px; }
}
@media (max-width: 640px) {
  .app-drawer { width: 100vw; }
  .drawer-two { grid-template-columns: 1fr; }
}