/* The coding-agent prompt and task guides share the documentation layout in
   pages.css; only their own parts are here. */
.agent-prompt {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 18px 20px;
  resize: vertical;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #0b0c0d;
  color: var(--code);
  font:
    13.5px/1.7 ui-monospace,
    monospace;
}
.prompt-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin-top: 12px;
}
.copy-button {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: var(--coral);
  color: #17151d;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.copy-button[hidden] {
  display: none;
}
.guide-related {
  margin-top: 48px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.guide-related h2 {
  font-size: 20px;
}
.docs-main .guide-related h2 {
  margin-bottom: 8px;
  font-size: 20px;
}
.docs-main .guide-related ul {
  margin: 0;
}
.guide-source {
  margin-top: 32px;
}
.docs-main .guide-source {
  color: var(--faint);
  font-size: 14px;
}

/* When Seige fits: the fit and the cases for other infrastructure side by
   side, each marked with its answer, so the boundary reads at a glance. */
.fit-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 24px;
}
.fit-compare > div {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.fit-compare > div::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: center / 16px no-repeat;
}
.fit-compare .fit-yes::before {
  background-color: #a8bab524;
  background-image: url("/icons/guides/check.svg");
}
.fit-compare .fit-no::before {
  background-color: #ffffff0f;
  background-image: url("/icons/guides/elsewhere.svg");
}
.docs-main .fit-compare p,
.docs-main .fit-compare li {
  font-size: 16px;
}
.docs-main .fit-compare p:last-child,
.docs-main .fit-compare ul {
  margin-bottom: 0;
}
.docs-main .fit-compare p + ul {
  margin-top: -8px;
}
@media (max-width: 700px) {
  .fit-compare {
    grid-template-columns: minmax(0, 1fr);
  }
}