/* Interactive Celery architecture diagram (SITE-REQ-023). Uses the blog runner buttons and tooltips. */

.celery-flow {
  margin: 1.5rem 0 2rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.celery-flow-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 20px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
}

.celery-flow-settings fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.celery-flow-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.celery-flow-field > label,
.celery-flow-settings legend {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
}

.celery-flow-segmented {
  display: inline-flex;
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.celery-flow-segmented label {
  position: relative;
  margin: 0;
  padding: 5px 12px;
  border-left: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
}

.celery-flow-segmented label:first-of-type {
  border-left: 0;
}

.celery-flow-segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.celery-flow-segmented label:has(input:checked) {
  background: var(--blue);
  color: #ffffff;
}

.celery-flow-segmented label:has(input:focus-visible) {
  outline: 2px solid var(--blue);
  outline-offset: -3px;
}

.celery-flow-settings input[type="text"],
.celery-flow-settings select {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #ffffff;
  color: var(--ink);
  font-size: 0.875rem;
}

.celery-flow-settings input[type="text"] {
  width: 11rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.celery-flow-settings input:disabled,
.celery-flow-settings select:disabled {
  background: var(--paper);
  color: var(--muted);
}

.celery-flow-check {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin: 0;
  color: var(--ink);
  cursor: pointer;
}

.celery-flow-check input {
  margin: 0;
}

.celery-flow-check code {
  font-size: 0.8125rem;
}

.celery-flow-check:has(input:disabled) {
  color: var(--muted);
  cursor: default;
}

.celery-flow-settings input:focus-visible,
.celery-flow-settings select:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

/* Diagram: scrolls sideways on narrow screens instead of shrinking the labels. */
.celery-flow-diagram {
  overflow-x: auto;
  padding: 8px 0;
}

.celery-flow-diagram:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.celery-flow-diagram > img,
.celery-flow-diagram > svg {
  display: block;
  width: 100%;
  min-width: 640px;
  height: auto;
}

.celery-flow-diagram [data-node] > rect,
.celery-flow-diagram [data-node] > ellipse,
.celery-flow-diagram [data-node] > path {
  transition: stroke-width 0.15s ease, fill 0.15s ease;
}

.celery-flow-diagram .is-active > rect:first-child,
.celery-flow-diagram .is-active > ellipse,
.celery-flow-diagram .is-active > path {
  stroke: var(--blue);
  stroke-width: 2.5;
}

.celery-flow-diagram .is-success > rect:first-child,
.celery-flow-diagram .is-success > ellipse {
  stroke: #2f8a3a;
  stroke-width: 2.5;
}

.celery-flow-diagram .is-danger > rect:first-child,
.celery-flow-diagram .is-danger > ellipse,
.celery-flow-diagram .is-danger > path {
  fill: #fde2e2;
  stroke: #c8322a;
  stroke-width: 2.5;
}

.celery-flow-diagram path.is-active {
  stroke: var(--blue);
  stroke-width: 2.2;
}

/* What travels along the lines: an envelope for the task message, a tick for the
   acknowledgement, and a page for the result. */
.celery-token {
  pointer-events: none;
}

.celery-token[hidden],
.celery-token [hidden] {
  display: none;
}

.celery-token > g > :first-child {
  stroke: #ffffff;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.celery-token > g > :not(:first-child) {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.celery-token-message > :first-child {
  fill: var(--blue);
}

.celery-token-ack > :first-child {
  fill: #2f8a3a;
}

.celery-token-result > :first-child {
  fill: #d0473f;
}

/* Playback controls */
.celery-flow-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
}

.celery-flow-buttons {
  display: flex;
  gap: 6px;
}

.celery-flow-controls .runner-run-btn .icon-pause,
.celery-flow-controls .runner-run-btn.is-playing .icon-play {
  display: none;
}

.celery-flow-controls .runner-run-btn.is-playing .icon-pause {
  display: block;
}

.celery-flow-speed {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--muted);
}

.celery-flow-speed select {
  height: 32px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #ffffff;
  color: var(--ink);
}

.celery-flow-counter {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.celery-flow-outcome {
  margin: 0;
  padding: 10px 16px 0;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
}

.celery-flow-outcome:empty {
  display: none;
}

.celery-flow-log-title {
  margin: 0;
  padding: 12px 16px 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

/* Event log */
.celery-flow-log {
  position: relative;
  max-height: 18rem;
  margin: 0;
  padding: 12px 16px 14px 16px;
  overflow-y: auto;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.5;
}

.celery-flow-log li {
  padding: 3px 8px;
  border-left: 3px solid transparent;
  color: var(--ink);
}

.celery-flow.is-enhanced .celery-flow-log li {
  color: var(--muted);
}

.celery-flow.is-enhanced .celery-flow-log li.is-done {
  color: var(--ink);
}

.celery-flow.is-enhanced .celery-flow-log li.is-current {
  border-left-color: var(--blue);
  background: #eef3ff;
  color: var(--ink);
}

.celery-log-step {
  display: inline-block;
  min-width: 1.25rem;
}

@media (max-width: 575.98px) {
  .celery-flow-settings,
  .celery-flow-controls,
  .celery-flow-log {
    padding-left: 12px;
    padding-right: 12px;
  }

}

/* Simulator card: centred, capped at 1440px with a window margin, and as tall as the window
   below the header. The diagram fills the left; settings, controls and the event log share a
   fixed column on the right. Only the log scrolls. Narrower screens stack and the page scrolls. */
.celery-flow--band {
  --celery-flow-gutter: 16px;
  width: min(1440px, 100% - 2 * var(--celery-flow-gutter));
  margin: var(--celery-flow-gutter) auto;
  /* site.css gives the page a 110px scroll padding; land the card one gutter below the header. */
  scroll-margin-top: calc(var(--celery-flow-offset, 70px) + var(--celery-flow-gutter) - 110px);
}

/* Compact post header so the simulator card starts high on the page. */
.celery-post-header {
  padding: 1.25rem 0 0;
}

.celery-post-header h1 {
  margin-bottom: 0.5rem;
  font-size: clamp(1.75rem, 1.1rem + 1.5vw, 2.4rem);
  line-height: 1.15;
}

.celery-post-header .doc-meta {
  margin-bottom: 0.75rem;
}

.celery-post-header > p {
  max-width: 52rem;
  margin-bottom: 0;
}

.celery-flow-steps {
  padding-left: 0;
  list-style: none;
}

.celery-flow-steps li {
  margin-bottom: 0.5rem;
}

/* Settings a “Try it” case changed are briefly marked. */
.celery-flow-settings .is-changed {
  border-radius: 4px;
  background: #eef3ff;
  box-shadow: 0 0 0 4px #eef3ff, 0 0 0 5px var(--blue);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.celery-try {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 1rem;
}

@media (min-width: 1280px) {
  .celery-flow--band {
    --celery-flow-gutter: 24px;
  }
}

@media (min-width: 1100px) {
  .celery-flow--band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    height: calc(100svh - var(--celery-flow-offset, 70px) - 2 * var(--celery-flow-gutter));
    min-height: 560px;
  }

  .celery-flow--band .celery-flow-diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 12px 16px;
    overflow: hidden;
  }

  .celery-flow--band .celery-flow-diagram > svg,
  .celery-flow--band .celery-flow-diagram > img {
    width: 100%;
    height: 100%;
    min-width: 0;
    object-fit: contain;
  }

  .celery-flow--band .celery-flow-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid var(--line);
  }

  /* Exchange and routing key share the first row; Failure and the checkboxes take full rows. */
  .celery-flow--band .celery-flow-settings {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 12px;
  }

  .celery-flow--band .celery-flow-settings > .celery-flow-field:has(select),
  .celery-flow--band .celery-flow-check {
    grid-column: 1 / -1;
  }

  .celery-flow--band .celery-flow-check {
    height: 24px;
  }

  .celery-flow--band .celery-flow-settings input[type="text"],
  .celery-flow--band .celery-flow-settings select {
    width: 100%;
  }

  .celery-flow--band .celery-flow-controls {
    border-top: 0;
  }

  .celery-flow--band .celery-flow-log {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .celery-flow-diagram [data-node] > rect,
  .celery-flow-diagram [data-node] > ellipse,
  .celery-flow-diagram [data-node] > path {
    transition: none;
  }
}