/* Shared components for agentmarkit.com. Markup and rules are in
   docs/design/system.md. Every selector is scoped under the page root so
   these win over older per-page rules; when you migrate an element, swap its
   class to one of these and delete the old rule in the same commit. */

/* Button. Base is the My Agents button (the most-used signed-in style). */
#agent-marketplace-homepage .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 11px 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font: 700 var(--text-sm) / 1 var(--font-mono);
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}
#agent-marketplace-homepage .btn:hover { border-color: var(--color-ink); }
#agent-marketplace-homepage .btn:disabled,
#agent-marketplace-homepage .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
#agent-marketplace-homepage .btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

#agent-marketplace-homepage .btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}
#agent-marketplace-homepage .btn-primary:hover { background: var(--color-accent-strong); border-color: var(--color-accent-strong); }

#agent-marketplace-homepage .btn-secondary { background: var(--color-surface); border-color: var(--color-line); color: var(--color-ink); }

#agent-marketplace-homepage .btn-quiet {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}
#agent-marketplace-homepage .btn-quiet:hover { color: var(--color-accent-strong); }

#agent-marketplace-homepage .btn-danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-accent-ink);
}

@media (max-width: 700px) {
  #agent-marketplace-homepage .btn:only-child:not(.btn-quiet) { width: 100%; }
}

/* Back link. One per page, first thing in main. */
#agent-marketplace-homepage .back-link {
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}
#agent-marketplace-homepage .back-link:hover { color: var(--color-accent); }
#agent-marketplace-homepage .back-link span[aria-hidden="true"] { color: var(--color-accent); font-size: 16px; }
#agent-marketplace-homepage .back-link:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* Status line. One state, one sentence, at most one action. Sits below the
   action row it belongs to. */
#agent-marketplace-homepage .status-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-muted);
  font: 500 var(--text-xs) / 1.4 var(--font-mono);
}
#agent-marketplace-homepage .status-line .status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-line);
  flex: none;
}
#agent-marketplace-homepage .status-line[data-tone="info"] .status-dot { background: var(--color-accent); }
#agent-marketplace-homepage .status-line[data-tone="ok"] .status-dot { background: var(--color-ok-ink); }
#agent-marketplace-homepage .status-line[data-tone="warn"] .status-dot { background: var(--color-warn-ink); }
#agent-marketplace-homepage .status-line[data-tone="error"] .status-dot { background: var(--color-danger); }
#agent-marketplace-homepage .status-line[data-tone="error"] { color: var(--color-danger); }

/* Steps. Labels come only from the progress model in docs/design/journeys.md. */
#agent-marketplace-homepage .steps ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-3);
}
#agent-marketplace-homepage .steps li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-muted);
  font: 600 var(--text-xs) / 1.3 var(--font-mono);
}
#agent-marketplace-homepage .steps li span {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  flex: none;
}
#agent-marketplace-homepage .steps li[aria-current="step"] { color: var(--color-ink); }
#agent-marketplace-homepage .steps li[aria-current="step"] span { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); }
#agent-marketplace-homepage .steps li.complete span { border-color: var(--color-ok-ink); background: var(--color-ok-bg); color: var(--color-ok-ink); }
@media (max-width: 430px) {
  #agent-marketplace-homepage .steps ol { grid-auto-flow: row; gap: var(--space-2); }
}