/* SQL practice, SQL-only rules. The palette and the workspace rules SQL
   shares with the jq practice (panels, output, before Start, the standalone
   page) live in hugo/assets/css/extended/playground-controls.css (D36),
   which both pages load. */

[data-sql-playground] .sqwp-workspace:not([hidden]) {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr);
}

/* The editor: the one strong element, a bar the reader types SQL in. */
[data-sql-playground] .sqwp-editor {
  width: 100%;
  min-height: 7rem;
  field-sizing: content;
  max-height: 20rem;
  padding: 0.6rem 0.9rem;
  border: 0;
  border-radius: 10px;
  resize: vertical;
  background: var(--wp-bar);
  color: var(--wp-bar-text);
  font: 16px/1.5 var(--wp-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
[data-sql-playground] .sqwp-editor:focus-visible { outline-color: var(--wp-prompt); outline-offset: 0; }

/* Run, Check, and Open full screen once ready. */
[data-sql-playground] .sqwp-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
[data-sql-playground] :is(.sqwp-run, .sqwp-check) {
  min-height: 44px;
  padding: 0 1.25rem;
  font-weight: 600;
}
[data-sql-playground] .sqwp-run {
  border: 0;
  background: var(--wp-run);
  color: #fff;
}
[data-sql-playground] .sqwp-run:hover { background: var(--wp-run-hover); }
[data-sql-playground] .sqwp-check {
  border: 1px solid var(--wp-run);
  background: var(--wp-field);
  color: var(--wp-ink);
}
[data-sql-playground] .sqwp-check:hover { border-color: var(--wp-run-hover); }
[data-sql-playground] :is(.sqwp-hint-button, .sqwp-answer-button, .sqwp-answer button) {
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--wp-line);
  background: var(--wp-field);
  color: var(--wp-ink);
}

/* The hint, under the exercise list once asked for (AC-05.1). */
[data-sql-playground] .sqwp-hint {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--wp-prompt);
  color: var(--wp-ink);
  font-size: 14px;
}

[data-sql-playground] .sqwp-workspace > [role="status"] {
  color: var(--wp-muted);
  font-size: 14px;
}
[data-sql-playground] .sqwp-workspace > [role="status"]:empty { display: none; }

/* The output: the shell's lines as printed, the error stream marked. */
[data-sql-playground] .sqwp-lines {
  margin: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: 14px/1.45 var(--wp-mono);
  white-space: pre;
}
[data-sql-playground] .sqwp-err { color: var(--wp-error); }

/* The deviation notes, after the shell's own output (D23). */
[data-sql-playground] .sqwp-notes:empty { display: none; }
[data-sql-playground] .sqwp-note {
  margin: 0.5rem 0 0;
  color: var(--wp-muted);
  font-size: 14px;
}

/* The drill: under each task, its status. Below 600 px of container width
   the list folds to a short scroll box so the editor stays in view (D26). */
[data-sql-playground] .sqwp-workspace { container-type: inline-size; }
[data-sql-playground] .sqwp-exercises li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.75rem;
  padding-left: calc(2.2rem + 3px);
  font-size: 13px;
}
[data-sql-playground] .sqwp-exercises li > .sqwp-exercise { flex: 1 0 100%; margin-left: calc(-2.2rem - 3px); }
[data-sql-playground] .sqwp-exercise-status { margin-left: auto; color: var(--wp-muted); }
@container (max-width: 599px) {
  [data-sql-playground] .sqwp-exercises { max-height: 9rem; }
}

/* The verdict, after the output (AC-04.1). */
[data-sql-playground] .sqwp-workspace > .sqwp-verdict {
  margin: 0.5rem 0 0;
  color: var(--wp-ink);
  font-weight: 600;
}

/* The reference query, below the editor once asked for (AC-05.2). */
[data-sql-playground] .sqwp-answer pre { margin: 0.5rem 0; white-space: pre-wrap; }

/* The key bar, under the editor (D26). */
[data-sql-playground] .sqwp-keybar { display: flex; flex-wrap: wrap; gap: 0.4rem; }
[data-sql-playground] .sqwp-keybar button { font: inherit; min-width: 44px; min-height: 44px; padding: 0 0.6rem; cursor: pointer; touch-action: manipulation; }