/* RAG practice, RAG-only rules: the stages after Start. The palette and the
   rules every practice shares (before Start, the standalone page) live in
   hugo/assets/css/extended/playground-controls.css, which both pages load. */

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

/* Controls (owner 2026-11-08): PaperMod's reset strips button and field
   chrome, so every button and field gets an edge and a fill from the shared
   palette (playground-controls.css). Kept first, so the font rules below
   (the mono inputs, doc buttons, and chunker toggle) still win. */
[data-rag-playground] .rawp-workspace :is(button, input, textarea) {
  color: var(--wp-ink);
  background: var(--wp-field);
  /* --wp-muted, not --wp-line: a control's edge needs 3:1 (WCAG 1.4.11). */
  border: 1px solid var(--wp-muted);
  border-radius: 6px;
}
[data-rag-playground] .rawp-workspace :is(input, textarea) {
  padding: 0.4rem 0.5rem;
}
[data-rag-playground] .rawp-workspace button {
  min-height: 44px;
  padding: 0.4rem 0.9rem;
  font: inherit;
  cursor: pointer;
}
[data-rag-playground] .rawp-workspace button:hover:not(:disabled) {
  border-color: var(--wp-run);
}
[data-rag-playground] .rawp-workspace button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
[data-rag-playground] .rawp-workspace .rawp-run {
  border-color: var(--wp-run);
  background: var(--wp-run);
  color: #ffffff;
  font-weight: 600;
}
[data-rag-playground] .rawp-workspace .rawp-run:hover:not(:disabled) {
  background: var(--wp-run-hover);
}
[data-rag-playground] .rawp-workspace :focus-visible {
  outline: 2px solid var(--wp-focus);
  outline-offset: 2px;
}

[data-rag-playground] .rawp-stage {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
[data-rag-playground] .rawp-stage-name {
  margin: 0;
  font-size: 1rem;
}

[data-rag-playground] .rawp-docs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
[data-rag-playground] :is(.rawp-docs button, .rawp-show-code) {
  min-height: 44px;
  font: 14px/1.4 var(--wp-mono);
}
/* A block's SQL starts collapsed under its summary (owner 2026-11-08). */
[data-rag-playground] .rawp-sql-fold > summary {
  min-height: 44px;
  display: list-item;
  cursor: pointer;
  font: 14px/44px var(--wp-mono);
}
/* Copy SQL sits under its block's SQL, apart from the output below it. */
[data-rag-playground] .rawp-copy-sql {
  min-height: 44px;
  margin: 0.25rem 0 0.5rem;
}
/* Input bars: the question, or the new doc's path, takes the room its
   button leaves. */
[data-rag-playground] .rawp-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
[data-rag-playground] :is(.rawp-question, .rawp-path, .rawp-k) {
  min-height: 44px;
  box-sizing: border-box;
  font: 14px/1.4 var(--wp-mono);
}
[data-rag-playground] :is(.rawp-question, .rawp-path) {
  flex: 1 1 12rem;
  min-width: 0;
}
[data-rag-playground] .rawp-label {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.35rem;
}
[data-rag-playground] .rawp-k {
  width: 4.5rem;
}
/* The run keys, said once under the inputs (procedural help at the point of need). */
[data-rag-playground] .rawp-hint {
  margin: 0.35rem 0 0.5rem;
  font-size: 0.85em;
}
[data-rag-playground] :is(.rawp-run, .rawp-add) {
  min-height: 44px;
}
[data-rag-playground] .rawp-note {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid currentColor;
  overflow-wrap: anywhere;
}

[data-rag-playground] .rawp-doc {
  width: 100%;
  box-sizing: border-box;
  font: 14px/1.5 var(--wp-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Script blocks: the SQL, then the shell's output. Output panes scroll
   sideways inside themselves; nothing else does (AC-02.5). */
[data-rag-playground] :is(.rawp-sql, .rawp-output, .rawp-code) {
  margin: 0;
  max-height: 24rem;
  overflow: auto;
  font: 13px/1.45 var(--wp-mono);
  white-space: pre;
}
/* Chunks prints .mode line records and Prompt a prompt, both whole
   paragraphs, so they wrap inside the pane (S0-12). The SQL and the chunker
   code wrap too, since only output panes may scroll sideways. */
[data-rag-playground] :is(.rawp-sql, .rawp-code, .rawp-block-chunks .rawp-output, .rawp-block-prompt .rawp-output, .rawp-answer-prompt) {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The check list: one row per check, query then expected file. */
[data-rag-playground] .rawp-checks {
  margin: 0;
  padding-left: 1.5rem;
}
[data-rag-playground] .rawp-check {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
[data-rag-playground] .rawp-check input {
  flex: 1 1 12rem;
  min-width: 0;
  font: 14px/1.5 var(--wp-mono);
}

/* A stage whose shown text changed in the last run (D7): the word plus a
   border, never colour alone. */
[data-rag-playground] .rawp-mark {
  display: inline-block;
  margin: 0 0 0.5rem;
  padding: 0 0.4rem;
  border: 2px solid currentColor;
  border-radius: 3px;
  font-size: 0.85em;
  font-weight: 600;
}

/* The task strip (owner 2026-11-08): the article's current task, kept in
   view beside the stages on wide screens; on a phone it scrolls with them. */
[data-rag-playground] .rawp-tasks {
  min-width: 0;
  padding: 0.5rem 0.75rem;
  /* The --wp tokens are set only on jq's and SQL's mounts; fall back to the
     site theme's, then the browser's, so the sticky strip is opaque. */
  border: 1px solid var(--wp-line, var(--border, currentColor));
  border-radius: 6px;
  background: var(--wp-paper, var(--theme, Canvas));
  color: var(--wp-ink, inherit);
}
[data-rag-playground] .rawp-task-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
[data-rag-playground] .rawp-task-count {
  flex: 1 1 auto;
  margin: 0;
  font-weight: 600;
}
[data-rag-playground] :is(.rawp-task-prev, .rawp-task-next) {
  min-height: 44px;
}
[data-rag-playground] .rawp-task > :first-child {
  margin-top: 0.5rem;
}
[data-rag-playground] .rawp-task :is(p, details) {
  overflow-wrap: anywhere;
}
@media (min-width: 48rem) {
  [data-rag-playground] .rawp-tasks {
    position: sticky;
    top: 0;
    z-index: 1;
    max-height: 40vh;
    overflow-y: auto;
  }
}

/* The Prompt stage's instructions (register row 10): a labeled box over
   the Prompt SQL. */
[data-rag-playground] .rawp-instructions-label {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}
[data-rag-playground] .rawp-instructions {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  font: 14px/1.4 var(--wp-mono);
}