/* SQL on CSV: the tables panel and the result grid. Loaded only on /tools/csv-sql/. */
.sql-tables { display: grid; gap: var(--matrix-space-12); justify-items: start; }
.sql-tables-heading { margin: 0; font-size: 1rem; }
.sql-schema { display: grid; gap: var(--matrix-space-12); width: 100%; }
.sql-table { border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); padding: var(--matrix-space-8) var(--matrix-space-12); display: grid; gap: var(--matrix-space-8); }
.sql-table-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--matrix-space-8); }
.sql-table-name { font-family: var(--matrix-font-mono); font-weight: 600; }
.sql-query-table { margin-left: auto; }
.sql-columns { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; }
.sql-columns li { display: inline-flex; gap: 6px; align-items: baseline; }
.sql-columns code { font-family: var(--matrix-font-mono); }
.sql-type { font-size: var(--matrix-type-caption); color: var(--matrix-muted); }
.sql-warning { margin: 0; font-size: var(--matrix-type-caption); }
.sql-result-wrap { overflow: auto; max-height: 32rem; margin-top: var(--matrix-space-12); border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); }
.sql-result-wrap:focus-visible { outline: 2px solid var(--matrix-brand); outline-offset: 2px; }
.sql-result { border-collapse: collapse; font-size: 0.875rem; font-family: var(--matrix-font-mono); white-space: nowrap; }
.sql-result th, .sql-result td { text-align: left; padding: 4px 10px; border-bottom: 1px solid var(--matrix-border); vertical-align: top; }
.sql-result th { position: sticky; top: 0; background: var(--matrix-surface); font-weight: 600; }
.sql-result td.sql-num { text-align: right; }
.sql-null { color: var(--matrix-muted); font-style: italic; }
@media (max-width: 600px) { .sql-query-table { margin-left: 0; } }
/* a column of decimal-comma numbers read as text is said in the warning colour (Jack 2026-10-12, appendix 46) */
.sql-warning--numbers { color: var(--matrix-warning); }