/**
 * The agents page.
 *
 * **It reads as a page, not as documentation.** The point is to make somebody try
 * it, and a page of configuration does not make anybody try anything.
 */

.agents-page {
  background: #05070d;
  min-height: 100dvh;
  /* **The page is sans-serif.** The globe's page uses a sans-serif face and this
     page inherits it, but the tool names are the only monospace on it and they
     should look like code rather than like headings. */
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.agents-main h1,
.agents-main h2 {
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 700;
}

.agents-main {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  margin: 0 auto;
  padding: 40px 20px 80px;
}

.agents-eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pink-bright);
}

.agents-main h1 {
  margin: 0 0 20px;
  font-size: clamp(30px, 8vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #fff;
}

.agents-lede {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(217, 236, 255, 0.76);
  max-width: 42rem;
}

.brand-link {
  text-decoration: none;
  color: inherit;
}

.agents-main h2 {
  margin: 40px 0 14px;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: #fff;
}

/**
 * The address.
 *
 * It is the one thing somebody needs to copy, so it is the one thing that is
 * given the most room and the most contrast.
 */
.agents-endpoint {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 28px 0 0;
  padding: 15px 17px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(217, 236, 255, 0.16);
}

.agents-endpoint-label {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(217, 236, 255, 0.5);
  width: 100%;
}

.agents-endpoint code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 14px;
  color: #fff;
  word-break: break-all;
  flex: 1;
  min-width: 0;
}

/**
 * The tools.
 */
.tool-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.tool-list li {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(217, 236, 255, 0.1);
}

/* **Every code element is monospace.** The browser's default for code is a
   monospace face, but the page sets a font on the body and the code inside a
   list item inherits the serif from the paragraph it sits in, which makes a
   tool name look like a word rather than a name. */
/* **Every code element is monospace.** The browser's default for code is a
   monospace face, but the page sets a font on the body and the code inside a
   list item inherits the serif from the paragraph it sits in, which makes a
   tool name look like a word rather than a name. */
.tool-list code,
.tool-list span code,
.agents-code code,
.agents-endpoint code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-ligatures: none;
}

/* The name of the tool is on its own line; the code inside the description is
   inside the text. */
.tool-list > li > code {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  color: var(--pink-bright);
}

.tool-list span {
  display: block;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(217, 236, 255, 0.72);
}

/**
 * The code and the output.
 */
.agents-code,
.agents-output {
  margin: 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(5, 7, 13, 0.7);
  border: 1px solid rgba(217, 236, 255, 0.12);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(217, 236, 255, 0.84);
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.agents-note {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(217, 236, 255, 0.68);
}

.agents-note a {
  color: var(--pink-bright);
}

.agents-try-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.agents-output {
  min-height: 8rem;
  max-height: 28rem;
  overflow-y: auto;
}

.agents-foot {
  margin: 48px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(217, 236, 255, 0.12);
  font-size: 14px;
  color: rgba(217, 236, 255, 0.66);
}

.agents-foot a {
  color: var(--pink-bright);
}