/* The agent guide (/whats-what/), built from the site tokens in tokens.css.
   Space separates the sections; the only rules on the page are the table's. */
#agent-marketplace-homepage.amh-build-first .agent-guide {
  color: var(--color-ink);
  font: 400 var(--text-base) / 1.5 var(--font-sans);
  padding-bottom: var(--space-8);
}

#agent-marketplace-homepage.amh-build-first .agent-guide .wrap {
  width: min(var(--guide-shell-max), calc(100% - 2 * var(--shell-gutter)));
  margin-inline: auto;
}

#agent-marketplace-homepage.amh-build-first .agent-guide section { padding: 0; }
#agent-marketplace-homepage.amh-build-first .agent-guide section + section { margin-top: var(--space-8); }
#agent-marketplace-homepage.amh-build-first .agent-guide .hero { padding-top: var(--space-8); }

/* Type: the h1, 20px section headings, 16px names and body, 14px detail, 13px labels. */
#agent-marketplace-homepage.amh-build-first .agent-guide :is(h1, h2, h3, h4) {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.3;
  margin: 0;
  text-wrap: balance;
}
#agent-marketplace-homepage.amh-build-first .agent-guide h1 { font-size: var(--text-h1); line-height: 1.06; margin-bottom: var(--space-4); }
#agent-marketplace-homepage.amh-build-first .agent-guide h2 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
#agent-marketplace-homepage.amh-build-first .agent-guide h3 { font-size: var(--text-base); letter-spacing: -0.01em; }
#agent-marketplace-homepage.amh-build-first .agent-guide :is(p, li, td, td .detail) { text-wrap: pretty; }
#agent-marketplace-homepage.amh-build-first .agent-guide p { margin: 0 0 var(--space-4); max-width: var(--guide-reading-max); }
#agent-marketplace-homepage.amh-build-first .agent-guide .lede { font-size: var(--text-guide-lede); color: var(--color-muted); }
#agent-marketplace-homepage.amh-build-first .agent-guide :is(.muted, .checked, .note, .scroll-hint) { color: var(--color-muted); }
#agent-marketplace-homepage.amh-build-first .agent-guide .muted { margin-bottom: var(--space-5); }
#agent-marketplace-homepage.amh-build-first .agent-guide :is(.checked, .note, .scroll-hint) { font-size: var(--text-sm); }
#agent-marketplace-homepage.amh-build-first .agent-guide .kicker { font: 700 var(--text-sm) / 1.4 var(--font-sans); color: var(--color-muted); margin-bottom: var(--space-3); }

/* Links: the site's quiet link, accent text with a soft underline. */
#agent-marketplace-homepage.amh-build-first .agent-guide a:not(.back-link, .bf-back) {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
  text-underline-offset: 3px;
}
#agent-marketplace-homepage.amh-build-first .agent-guide a:not(.back-link, .bf-back):hover { color: var(--color-accent-strong); text-decoration-color: currentColor; }
#agent-marketplace-homepage.amh-build-first .agent-guide :is(.back-link, .bf-back) { display: inline-block; margin-bottom: var(--space-5); }

/* Toggles: plain text with an accent marker, no frame. */
#agent-marketplace-homepage.amh-build-first .agent-guide .explainer { max-width: var(--guide-explainer-max); margin-top: var(--space-4); }
#agent-marketplace-homepage.amh-build-first .agent-guide summary { cursor: pointer; display: list-item; padding: var(--space-2) 0; min-height: var(--tap-min); font: 600 var(--text-base) / 1.75 var(--font-sans); }
#agent-marketplace-homepage.amh-build-first .agent-guide summary::marker { color: var(--color-accent); }
#agent-marketplace-homepage.amh-build-first .agent-guide .explanation { padding: var(--space-2) 0; }
#agent-marketplace-homepage.amh-build-first .agent-guide blockquote { margin: var(--space-4) 0 var(--space-5); padding-left: var(--space-4); border-left: 2px solid var(--color-line); max-width: var(--guide-reading-max); font: 400 var(--text-base) / 1.5 var(--font-sans); }

/* Tool panels: each interactive block sits on one white panel, so it reads as one object. */
#agent-marketplace-homepage.amh-build-first .agent-guide .tool-panel { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-6); }

/* Chat picker: outlined chips; each result is a name, one status line, and a note only when it adds something. */
#agent-marketplace-homepage.amh-build-first .agent-guide .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-6); }
#agent-marketplace-homepage.amh-build-first .agent-guide .chips .btn { width: auto; min-height: 40px; border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font: 600 var(--text-md) / 1.3 var(--font-sans); color: var(--color-ink); }
#agent-marketplace-homepage.amh-build-first .agent-guide .chips .btn[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-surface); }
#agent-marketplace-homepage.amh-build-first .agent-guide .agents { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
#agent-marketplace-homepage.amh-build-first .agent-guide .agent h3 { margin-bottom: var(--space-2); }
#agent-marketplace-homepage.amh-build-first .agent-guide .agent .fit { display: flex; align-items: center; gap: var(--space-2); margin: 0; font: 600 var(--text-md) / 1.4 var(--font-sans); }
#agent-marketplace-homepage.amh-build-first .agent-guide .agent .fit-dot { width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--color-line); flex: none; }
#agent-marketplace-homepage.amh-build-first .agent-guide .agent .fit[data-tone="ok"] { color: var(--color-ok-ink); }
#agent-marketplace-homepage.amh-build-first .agent-guide .agent .fit[data-tone="ok"] .fit-dot { background: var(--color-ok-ink); }
#agent-marketplace-homepage.amh-build-first .agent-guide .agent .fit[data-tone="warn"] { color: var(--color-warn-ink); }
#agent-marketplace-homepage.amh-build-first .agent-guide .agent .fit[data-tone="warn"] .fit-dot { background: var(--color-warn-ink); }
#agent-marketplace-homepage.amh-build-first .agent-guide .agent .fit[data-tone="off"] { color: var(--color-muted); }
#agent-marketplace-homepage.amh-build-first .agent-guide .agent[data-fit="no"] h3 { color: var(--color-muted); }
#agent-marketplace-homepage.amh-build-first .agent-guide .agent .why { margin: var(--space-2) 0 0; color: var(--color-muted); font-size: var(--text-md); }
#agent-marketplace-homepage.amh-build-first .agent-guide .channel-sources { margin: var(--space-6) 0 0; }

/* Table: one strong rule under the header, thin rules between rows, nothing else. */
#agent-marketplace-homepage.amh-build-first .agent-guide .table-scroll { overflow-x: auto; }
#agent-marketplace-homepage.amh-build-first .agent-guide table { width: 100%; min-width: var(--guide-table-min); border-collapse: collapse; table-layout: fixed; }
#agent-marketplace-homepage.amh-build-first .agent-guide :is(th, td) { padding: var(--space-4) var(--space-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-line); }
#agent-marketplace-homepage.amh-build-first .agent-guide thead th { border-bottom: 2px solid var(--color-ink); font: 700 var(--text-base) / 1.3 var(--font-sans); letter-spacing: -0.01em; padding-top: 0; }
#agent-marketplace-homepage.amh-build-first .agent-guide thead th span { display: block; font: 500 var(--text-sm) / 1.4 var(--font-sans); letter-spacing: normal; color: var(--color-muted); margin-top: var(--space-1); }
#agent-marketplace-homepage.amh-build-first .agent-guide tr > th:first-child { width: var(--guide-row-label); position: sticky; left: 0; z-index: 1; background: var(--color-surface); font: 600 var(--text-md) / 1.4 var(--font-sans); padding-left: 0; }
#agent-marketplace-homepage.amh-build-first .agent-guide tbody tr:last-child > * { border-bottom: 0; }
#agent-marketplace-homepage.amh-build-first .agent-guide td .answer { display: block; font: 600 var(--text-base) / 1.3 var(--font-sans); letter-spacing: -0.01em; margin-bottom: var(--space-2); }
/* Links inside a short answer keep the answer ink, so every answer in a row reads at the same weight. */
#agent-marketplace-homepage.amh-build-first .agent-guide td .answer a:not(.back-link, .bf-back) { color: inherit; }
#agent-marketplace-homepage.amh-build-first .agent-guide td .detail { display: block; color: var(--color-muted); font-size: var(--text-md); line-height: 1.5; }
#agent-marketplace-homepage.amh-build-first .agent-guide .cell-agent { display: none; color: var(--color-muted); font: 600 var(--text-sm) / 1.4 var(--font-sans); margin-bottom: var(--space-2); }
#agent-marketplace-homepage.amh-build-first .agent-guide .footnote-ref { font: 600 var(--text-md) / 0 var(--font-sans); vertical-align: super; margin-left: var(--space-1); }
#agent-marketplace-homepage.amh-build-first .agent-guide thead th .footnote-ref { display: inline; margin-top: 0; color: var(--color-muted); }
#agent-marketplace-homepage.amh-build-first .agent-guide [hidden] { display: none !important; }
#agent-marketplace-homepage.amh-build-first .agent-guide #training { scroll-margin-top: var(--space-6); }

#agent-marketplace-homepage.amh-build-first .agent-guide :is(summary, .table-scroll, a, input):focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
#agent-marketplace-homepage.amh-build-first .agent-guide .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 900px) {
  #agent-marketplace-homepage.amh-build-first .agent-guide .agents { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  #agent-marketplace-homepage.amh-build-first .agent-guide section + section { margin-top: var(--space-7); }
  #agent-marketplace-homepage.amh-build-first .agent-guide .tool-panel { padding: var(--space-5) var(--space-4); }
  #agent-marketplace-homepage.amh-build-first .agent-guide .agents { gap: var(--space-5); }
  /* Once the table scrolls sideways, each cell names its agent again. */
  #agent-marketplace-homepage.amh-build-first .agent-guide .cell-agent { display: block; }
}

@media (max-width: 430px) {
  #agent-marketplace-homepage.amh-build-first .agent-guide :is(th, td) { padding: var(--space-3) var(--space-2); }
  #agent-marketplace-homepage.amh-build-first .agent-guide tr > th:first-child { width: var(--guide-row-label-mobile); padding-left: 0; }
  #agent-marketplace-homepage.amh-build-first .agent-guide .hero { padding-top: var(--space-6); }
}