/* sql — tool-specific styles
   只放这个工具独有的东西。公共外观（toolbox / field / alert / runs 表格 / chip）
   已经在全局样式表里，新工具不需要碰它。

   ★ 不写任何裸色值：一律走主题变量（--surface / --line / --fg …），
     否则换一版主题时这里会留下"改不动的硬色块"。 */

.sql-block {
  margin-top: 22px;
}

/* 输入框：它是 textarea 而不是 input，公共 .field__input 的几项在这里被覆盖
   （高度、行高、可纵向拉伸、制表宽度）。 */
.sql-area {
  width: 100%;
  min-height: 148px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--control);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
  tab-size: 2;
}

.sql-area:focus {
  outline: none;
  border-color: var(--accent);
}

/* 结果用 pre 而不是 div：SQL 的对齐靠空格，任何自动折行都会毁掉可读性，
   所以这里要横向滚动而不是换行。 */
.sql-pre {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
  tab-size: 2;
}

/* 改动表 / 警告表：窄屏交给横向滚动，不隐藏任何一列 */
.sql-scroll {
  overflow-x: auto;
}

.sql-table {
  min-width: 560px;
}

.sql-table td {
  vertical-align: top;
}

.sql-code {
  font-size: 12.5px;
  word-break: break-word;
}

.sql-rule {
  font-size: 13px;
  color: var(--fg-muted);
}

.sql-lede {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--fg-muted);
}