/* The QueryEase demo surface. It used to live inside a window; it is now a
   panel inside its own section (css/sections.css draws the panel, this file
   draws what runs in it). Everything that styled the old console windows went
   with them. */

/* QueryEase live demo (js/queryease.js) */
.qe-note { font-size: 0.72rem; color: var(--slate); border-left: 1px solid var(--line);
  padding-left: var(--sp-3); margin-bottom: var(--sp-3); }

.qe-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }

.qe-chip { background: var(--asphalt); color: var(--green); border: 1px solid var(--line);
  border-radius: var(--radius); font-family: var(--font-mono); font-size: 0.68rem;
  padding: 3px 8px; cursor: pointer; }

.qe-chip:hover { border-color: var(--green); }

.qe-line { display: flex; gap: var(--sp-2); align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-2); }

.qe-prompt { color: var(--green); font-size: 0.8rem; }

.qe-in { flex: 1; background: none; border: 0; outline: none; color: var(--bone);
  font-family: var(--font-mono); font-size: 0.8rem; }

.qe-sql { background: var(--asphalt); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-3); font-size: 0.72rem; color: var(--green); overflow-x: auto; white-space: pre; }

.qe-table { width: 100%; border-collapse: collapse; font-size: 0.74rem; margin-top: var(--sp-2); }

.qe-table th, .qe-table td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; }

.qe-table th { color: var(--slate); font-weight: 400; }

.qe-time { color: var(--slate); font-size: 0.68rem; }

.qe-empty { color: var(--slate); font-size: 0.76rem; }

.qe-out { margin-top: var(--sp-3); overflow-x: auto; }