/* jq practice. Colours come from the site's plum ramp (theme-colors.css), so
   the playground reads as part of the article; the standalone page loads no
   site CSS, so the same values are set here, with a dark variant that follows
   the site's data-theme in articles and the system setting on its own page.
   The command line is the one strong element: a plum bar the reader types in.
   Everything else is quiet panels that size to the space (container queries),
   so one stylesheet serves the article column and the full window. */

[data-jq-playground] {
  --jq-paper: #fbf9fe;
  --jq-field: #ffffff;
  --jq-ink: #241733;
  --jq-muted: #6b5a80;
  --jq-line: #e4d9f2;
  --jq-bar: #2d1240;
  --jq-bar-text: #f4effb;
  --jq-prompt: #b98cf0;
  --jq-run: #6d28b8;
  --jq-run-hover: #4b1f6f;
  --jq-night: #1a0b26;
  --jq-night-text: #e4d9f2;
  --jq-night-edge: #1a0b26;
  --jq-error: #ff9cad;
  --jq-focus: #8b4fd6;
  --jq-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --jq-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  container-type: inline-size;
  margin: 1.5rem 0;
  color: var(--jq-ink);
  font: 15px/1.5 var(--jq-sans);
}

:root[data-theme="dark"] [data-jq-playground] {
  --jq-paper: #170b21;
  --jq-field: #22122f;
  --jq-ink: #e6d8f7;
  --jq-muted: #a693bd;
  --jq-line: #3a2450;
  --jq-bar: #2c1a3d;
  --jq-night: #07030a;
  --jq-run: #8b4fd6;
  --jq-run-hover: #7a3fd0;
  --jq-night-edge: #3a2450;
  --jq-focus: #d3b4fa;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) [data-jq-playground] {
    --jq-paper: #170b21;
    --jq-field: #22122f;
    --jq-ink: #e6d8f7;
    --jq-muted: #a693bd;
    --jq-line: #3a2450;
    --jq-bar: #2c1a3d;
    --jq-night: #07030a;
    --jq-run: #8b4fd6;
    --jq-run-hover: #7a3fd0;
    --jq-night-edge: #3a2450;
    --jq-focus: #d3b4fa;
  }
}

[data-jq-playground] *, [data-jq-playground] *::before { box-sizing: border-box; }
[data-jq-playground] [hidden] { display: none !important; }
[data-jq-playground] p { margin: 0; }

[data-jq-playground] :focus-visible {
  outline: 2px solid var(--jq-focus);
  outline-offset: 2px;
}

[data-jq-playground] button {
  font: inherit;
  cursor: pointer;
  border-radius: 6px;
}

/* ---------- before Start ---------- */

[data-jq-playground]:not(.jqwp-ready) {
  padding: 1rem 1.25rem;
  border: 1px solid var(--jq-line);
  border-radius: 10px;
  background: var(--jq-paper);
}

[data-jq-playground] .jqwp-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 0.75rem; }
[data-jq-playground] .jqwp-actions:not(:has(> :not([hidden]))) { display: none; }

[data-jq-playground] .jqwp-start,
[data-jq-playground] .jqwp-retry {
  padding: 0.55rem 1.1rem;
  border: 0;
  background: var(--jq-run);
  color: #fff;
  font-weight: 600;
}
[data-jq-playground] .jqwp-start:hover,
[data-jq-playground] .jqwp-retry:hover { background: var(--jq-run-hover); }
[data-jq-playground] .jqwp-start:disabled { opacity: 0.6; cursor: progress; }

/* Open full screen (the article's shortcode renders it): beside Start, then
   in the command bar beside Run once jq is ready (the host moves it). It
   opens the standalone page in a new tab. */
[data-jq-playground] .playground-fullscreen:not([hidden]) {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 2.6rem;
  padding: 0 1rem;
  border: 1px solid var(--jq-line);
  border-radius: 6px;
  color: var(--jq-run);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
[data-jq-playground] .playground-fullscreen:hover { border-color: var(--jq-run); }
[data-jq-playground] .jqwp-line .playground-fullscreen:not([hidden]) {
  border-color: rgba(185, 140, 240, 0.45);
  color: var(--jq-bar-text);
}
[data-jq-playground] .jqwp-line .playground-fullscreen:hover { border-color: var(--jq-prompt); }

[data-jq-playground] .jqwp-preview {
  margin: 0.75rem 0 0;
  max-height: 16rem;
  overflow: auto;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background: var(--jq-field);
  border: 1px solid var(--jq-line);
  color: var(--jq-muted);
  font: 13px/1.5 var(--jq-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- once ready: the workspace ---------- */

[data-jq-playground].jqwp-ready { margin: 1.5rem 0; padding: 0; border: 0; }
[data-jq-playground].jqwp-ready > .jqwp-actions { margin: 0 0 0.5rem; justify-content: flex-end; }

[data-jq-playground] .jqwp-workspace:not([hidden]) {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "line" "status" "output" "input" "practice";
}

/* The command bar. */
[data-jq-playground] .jqwp-line {
  grid-area: line;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 0.9rem;
  border-radius: 10px;
  background: var(--jq-bar);
}
[data-jq-playground] .jqwp-prompt {
  padding-top: 0.45rem;
  color: var(--jq-prompt);
  font: 600 17px/1.5 var(--jq-mono);
  user-select: none;
}
[data-jq-playground] .jqwp-command {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: 2.6rem;
  field-sizing: content;
  max-height: 10rem;
  padding: 0.45rem 0.25rem;
  border: 0;
  border-radius: 4px;
  resize: none;
  background: transparent;
  color: var(--jq-bar-text);
  font: 17px/1.5 var(--jq-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
[data-jq-playground] .jqwp-command:focus-visible { outline-color: var(--jq-prompt); outline-offset: 0; }
[data-jq-playground] .jqwp-run {
  flex-shrink: 0;
  min-height: 2.6rem;
  padding: 0 1.25rem;
  border: 0;
  background: var(--jq-run);
  color: #fff;
  font-weight: 600;
}
[data-jq-playground] .jqwp-run:hover { background: var(--jq-run-hover); }
[data-jq-playground] .jqwp-run:focus-visible { outline-color: var(--jq-prompt); }

/* The status and the saved-sample offer, under the bar. */
[data-jq-playground] .jqwp-workspace > [role="status"] {
  grid-area: status;
  color: var(--jq-muted);
  font-size: 14px;
}
[data-jq-playground] .jqwp-workspace > [role="status"]:empty { display: none; }
[data-jq-playground] .jqwp-workspace > .jqwp-offer {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--jq-run);
  background: var(--jq-field);
  font-size: 14px;
}
[data-jq-playground] .jqwp-use {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--jq-run);
  background: transparent;
  color: var(--jq-run);
  font-weight: 600;
}

/* Panels: a header line, then the content. */
[data-jq-playground] .jqwp-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
[data-jq-playground] .jqwp-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-height: 2rem;
  padding: 0 0.1rem 0.35rem;
  color: var(--jq-muted);
  font-size: 14px;
}
[data-jq-playground] .jqwp-name { font-weight: 600; color: var(--jq-ink); }
[data-jq-playground] .jqwp-input .jqwp-name { font-family: var(--jq-mono); font-weight: 500; }
[data-jq-playground] .jqwp-head > :last-child:not(.jqwp-name) { margin-left: auto; }

[data-jq-playground] .jqwp-output { grid-area: output; }
[data-jq-playground] .jqwp-input { grid-area: input; }
[data-jq-playground] .jqwp-practice { grid-area: practice; }

/* Output: jq's own text on the dark of a terminal. */
[data-jq-playground] .jqwp-output-body {
  flex: 1;
  min-height: 6rem;
  max-height: 24rem;
  overflow: auto;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--jq-night-edge);
  border-radius: 8px;
  background: var(--jq-night);
  color: var(--jq-night-text);
}
[data-jq-playground] .jqwp-output-body:has(.jqwp-stdout:empty):has(.jqwp-stderr:empty)::before {
  content: "Run a command to see jq's output here.";
  color: #8f7ba8;
  font: 14px/1.5 var(--jq-sans);
}
[data-jq-playground] .jqwp-stdout,
[data-jq-playground] .jqwp-stderr {
  margin: 0;
  font: 14px/1.5 var(--jq-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
[data-jq-playground] .jqwp-stdout:empty, [data-jq-playground] .jqwp-stderr:empty { display: none; }
[data-jq-playground] .jqwp-stderr { color: var(--jq-error); }
[data-jq-playground] .jqwp-stdout:not(:empty) + .jqwp-stderr:not(:empty) { margin-top: 0.5rem; }
[data-jq-playground] .jqwp-exit {
  font-family: var(--jq-mono);
  font-size: 13px;
  color: #b00020;
}
:root[data-theme="dark"] [data-jq-playground] .jqwp-exit { color: var(--jq-error); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) [data-jq-playground] .jqwp-exit { color: var(--jq-error); }
}

/* The practice file. */
[data-jq-playground] .jqwp-reset {
  padding: 0.15rem 0.7rem;
  border: 1px solid var(--jq-line);
  background: var(--jq-field);
  color: var(--jq-ink);
  font-size: 13px;
}
[data-jq-playground] .jqwp-reset:hover { border-color: var(--jq-muted); }
[data-jq-playground] .jqwp-pane {
  flex: 1;
  width: 100%;
  min-height: 12rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--jq-line);
  border-radius: 8px;
  background: var(--jq-field);
  color: var(--jq-ink);
  font: 13px/1.55 var(--jq-mono);
  white-space: pre;
  overflow: auto;
  resize: vertical;
}

/* Exercises: a numbered list of tasks under their Learn jq sections. */
[data-jq-playground] .jqwp-exercises {
  max-height: 20rem;
  overflow: auto;
  padding-right: 0.25rem;
  overflow-wrap: anywhere;
}
[data-jq-playground] .jqwp-exercises > p { color: var(--jq-muted); font-size: 14px; margin: 0 0 0.5rem; }
[data-jq-playground] .jqwp-exercises .jqwp-section {
  margin: 1rem 0 0.25rem;
  color: var(--jq-ink);
  font-weight: 600;
}
[data-jq-playground] .jqwp-exercises ol { list-style: none; margin: 0; padding: 0; }
[data-jq-playground] .jqwp-exercise {
  display: flex;
  gap: 0.6rem;
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0 6px 6px 0;
  background: transparent;
  color: var(--jq-ink);
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
}
[data-jq-playground] .jqwp-exercise:hover { background: var(--jq-field); }
[data-jq-playground] .jqwp-exercise[aria-current="true"] {
  border-left-color: var(--jq-run);
  background: var(--jq-field);
}
[data-jq-playground] .jqwp-number {
  flex: 0 0 1.6rem;
  color: var(--jq-muted);
  font-family: var(--jq-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Two columns once the panes have room: output beside the file. */
@container (min-width: 600px) {
  [data-jq-playground] .jqwp-workspace:not([hidden]) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "line line" "status status" "input output" "practice practice";
  }
}

/* The full window: exercises, file, and output side by side. */
@container (min-width: 1000px) {
  [data-jq-playground] .jqwp-workspace:not([hidden]) {
    grid-template-columns: minmax(16rem, 0.8fr) minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-areas: "line line line" "status status status" "practice input output";
  }
}

/* ---------- the standalone page gives the playground the window ---------- */

/* The page itself (body, bar, links) takes the site's theme from
   _default/playground.html; the playground paints its own paper below. */

[data-jq-playground][data-playground-fit] {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0.75rem 1rem 1rem;
  border: 0;
  border-radius: 0;
  background: var(--jq-paper);
  overflow: auto;
}
[data-jq-playground][data-playground-fit]:not(.jqwp-ready) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
[data-jq-playground][data-playground-fit]:not(.jqwp-ready) > [role="status"] { max-width: 34rem; font-size: 17px; }
[data-jq-playground][data-playground-fit]:not(.jqwp-ready) .jqwp-actions { justify-content: center; }

[data-jq-playground][data-playground-fit].jqwp-ready { display: flex; flex-direction: column; }

@container (min-width: 1000px) {
  [data-jq-playground][data-playground-fit] .jqwp-workspace:not([hidden]) {
    flex: 1;
    min-height: 0;
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  [data-jq-playground][data-playground-fit] .jqwp-panel { min-height: 0; }
  [data-jq-playground][data-playground-fit] .jqwp-output-body,
  [data-jq-playground][data-playground-fit] .jqwp-exercises { max-height: none; flex: 1; min-height: 0; }
  [data-jq-playground][data-playground-fit] .jqwp-pane { resize: none; min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-jq-playground] * { transition: none !important; }
}