/* ─────────────────────────────────────────────────────────────────────────
   features9.css — the Features page. Loads after site9.css and assumes its
   tokens, header, footer, `.page-hero`, `.section` and `.features` grid.

   Almost all of this page is shared furniture; the only thing it owns is the
   tool grid below. If a rule here starts being wanted by a second page, it
   belongs in site9.css instead.
   ───────────────────────────────────────────────────────────────────────── */

/* Twelve MCP tool names, each a short code token plus a plain-English gloss.
   Four across is the count that keeps `get_active_environment` — the longest
   name — on one line at the widest breakpoint; five would break it. */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 16px);
  max-width: 1120px;
  margin-inline: auto;
}

.tool {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  transition: border-color .15s ease;
}
.tool:hover { border-color: var(--border-2); }

/* The token keeps the mono face but drops the pill that `code` carries
   globally — inside a bordered card the second border reads as a box in a box.
   `align-self: start` stops it stretching to the card's full width. */
.tool code {
  align-self: start;
  padding: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent-ink);
  background: none;
  border: 0;
}

.tool span {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t2);
}

/* ─────────────── responsive ─────────────── */

/* Stated counts, never auto-fit: 4 → 3 → 2 → 1, so twelve items always divide
   evenly and no row is left holding a single orphan. */
@media (max-width: 1080px) {
  .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .tool-grid { grid-template-columns: minmax(0, 1fr); }
}