/* The Unix pipeline — small tools, each doing one thing, joined by pipes.
   Toggle stages and watch a raw log become an answer ("top clients causing 404s")
   built from parts that individually know nothing about that question. The power
   is the composition. Vanilla JS, no deps, no build. Dark theme. Shared palette:
   cyan = an active stage, green = the composed answer (the win). No red. */

#unix-pipe-composer {
  --up-on: #5ac8fa;                 /* an enabled stage */
  --up-out: #30d158;                /* the composed answer — the win */
  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  background: var(--color-bg-elevated, #111111);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px;
  padding: clamp(16px, 3vw, 26px);
  margin: 2.5rem 0;
  color: var(--color-text-primary, #ffffff);
}

.up-title { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.up-explain {
  font-size: 0.9rem; line-height: 1.55; margin: 8px 0 18px;
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
}

.up-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--color-text-tertiary, rgba(255,255,255,0.42)); margin: 0 0 7px;
}

/* the raw input + output panes */
.up-pane {
  font-family: var(--font-mono, "SF Mono", Monaco, monospace);
  font-size: 0.8rem; line-height: 1.5; color: #d6d6d8;
  background: #0c0c0f; border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08));
  border-radius: 9px; padding: 12px 14px; white-space: pre; overflow-x: auto;
  transition: border-color 0.25s;
}
.up-pane--in { max-height: 168px; overflow-y: auto; }
.up-out.is-answer { border-color: var(--up-out); }
.up-out .up-count { color: var(--up-out); font-weight: 600; }

/* the stage toggles */
.up-stages { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.up-stage {
  appearance: none; cursor: pointer; font: inherit;
  font-family: var(--font-mono, monospace); font-size: 0.82rem;
  color: var(--color-text-secondary, rgba(255,255,255,0.55));
  background: transparent; border: 1px solid var(--color-border, rgba(255,255,255,0.14));
  border-radius: 8px; padding: 7px 12px;
  transition: color 0.15s, background 0.15s, border-color 0.15s, opacity 0.15s;
}
.up-stage:hover { color: var(--color-text-primary, #fff); border-color: rgba(255,255,255,0.4); }
.up-stage.is-on {
  color: #fff; border-color: var(--up-on); background: rgba(90,200,250,0.12);
}
.up-stage.is-on::before { content: "✓ "; color: var(--up-on); font-weight: 700; }

/* the composed command line */
.up-cmd {
  font-family: var(--font-mono, monospace); font-size: 0.82rem; line-height: 1.6;
  color: var(--color-text-secondary, rgba(255,255,255,0.72));
  background: var(--color-bg-surface, #1a1a1a);
  border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08));
  border-radius: 8px; padding: 10px 13px; margin-bottom: 14px;
  white-space: pre-wrap; word-break: break-word;
}
.up-cmd .up-pipe { color: var(--up-on); }
.up-cmd .up-prompt { color: var(--color-text-tertiary, rgba(255,255,255,0.4)); }

.up-readout {
  margin-top: 12px; font-size: 0.84rem;
  color: var(--color-text-secondary, rgba(255,255,255,0.6));
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.up-readout b { color: #fff; font-variant-numeric: tabular-nums; }
.up-readout .up-arrow { color: var(--color-text-tertiary, rgba(255,255,255,0.4)); }
.up-readout .up-final { color: var(--up-out); }

.up-reset {
  margin-left: auto; appearance: none; cursor: pointer; font: inherit; font-size: 0.84rem;
  background: transparent; color: var(--color-text-primary, #fff);
  border: 1px solid var(--color-border, rgba(255,255,255,0.15)); border-radius: 8px; padding: 6px 13px;
  transition: border-color 0.15s, background 0.15s;
}
.up-reset:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05); }
@media (max-width: 520px) { .up-reset { margin-left: 0; } }

.up-noscript { font-size: 0.9rem; color: var(--color-text-secondary, rgba(255,255,255,0.65)); line-height: 1.6; }