/* Page rider for forge/mcp/, loaded after anvil-core.css,
   deliberately unlayered so it always wins over the layered core. Holds
   only what this page alone uses; a rule graduates to core only when a
   second page needs it. */

/* ---- MCP catalog ---- */
/* tool-count line on the overview cards, below .card-desc */
.card-meta {
  margin: 10px 0 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
}

/* The card grid carries no bottom margin of its own, so the first server
   heading would otherwise sit directly against the last card. */
#server-cards { margin-bottom: 48px; }

/* ---- "On this page" rail ----
   Two columns inside the existing 1080px .wrap, so this page stays aligned
   with the top nav instead of running wider than the rest of the site.
   align-items: start is load-bearing: without it the rail's grid item
   stretches to the full row height, and a sticky box that is already as tall
   as its containing block has nowhere to travel, so it silently scrolls away.
   Below 1024px the content column gets too narrow for the tool tables, so the
   rail unsticks and stacks instead. */
.withrail {
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.rail { position: sticky; top: 24px; }
.rail-title {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.rail ul { list-style: none; margin: 0; padding: 0; }
.rail a {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  padding: 4px 0 4px 12px;
  border-left: 2px solid var(--border);
  overflow-wrap: anywhere;
}
.rail a.sub { padding-left: 24px; font-size: 11.5px; }
/* the return-to-top link is an action, not a section, so it sits above the
   outline rather than reading as its first entry */
.rail a.totop::before { content: "\2191"; margin-right: 6px; }
.rail li:first-child { margin-bottom: 7px; padding-bottom: 7px; border-bottom: 1px solid var(--border); }
/* Configuration is the page's own section rather than a server, so the same
   divider closes the server list above it */
.rail li.ruled { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border); }
.rail a:hover { color: var(--ink); }
.rail a.on { color: var(--ember); border-left-color: var(--ember); }
.rail a:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

@media (max-width: 1024px) {
  .withrail { grid-template-columns: 1fr; gap: 0; }
  .rail { position: static; margin-bottom: 36px; }
}

/* a clicked rail link should land its heading on the rail's own top line */
.withrail h2[id], .withrail h3[id] { scroll-margin-top: 24px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* per-server section: prefix + reference line under the heading */
.server-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin: 0 2px 6px;
  font-size: 13px;
  color: var(--muted);
}
.server-meta code {
  font-family: var(--mono);
  color: var(--ember);
  background: color-mix(in srgb, var(--ember) 12%, transparent);
  padding: 1px 7px;
  border-radius: 5px;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.server-meta a { color: var(--ember); text-decoration: none; }
.server-meta a:hover { text-decoration: underline; }

/* type and permission pills: both a core .chip plus MCP's typography, each
   drawing from a different half of the palette so the two tag families
   read as distinct at a glance. Type (what the tool does) uses the cool
   tones: read is blue, search is cyan, write is ember. Permission (what
   Claude may do with it) uses the warm traffic-light tones: allow is
   go-green, ask is caution-yellow, deny is stop-red. */
.type-chip,
.permission-chip {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.type-chip.read { --chip: var(--sl-blue); }
.type-chip.search { --chip: var(--sl-cyan); }
.type-chip.write { --chip: var(--ember); }
.permission-chip.allow { --chip: var(--sl-green); }
.permission-chip.ask { --chip: var(--sl-yellow); }
.permission-chip.deny { --chip: var(--sl-red); }

/* a tool can carry two type chips (e.g. "read, write"); space them out */
.kv td .chip + .chip { margin-left: 6px; }

/* sub-group heading within a server section, e.g. "Requires confirmation" */
.section h3 { margin: 26px 0 4px; font-size: 14px; color: var(--ink); }

/* the two sample pills shown inline in the intro hint */
.hint .legend { display: inline-flex; gap: 6px; margin: 0 4px; vertical-align: middle; }

/* core styles .tagline links but not .lede, and this page's lede carries the
   Model Context Protocol reference */
.lede a { color: var(--ember); text-decoration: none; }
.lede a:hover { text-decoration: underline; }

/* config block labels (replace the old Servers/Permissions tabs) */
.config-label { margin: 22px 0 8px; font-family: var(--mono); font-size: 13px; color: var(--muted); }