/* ============================================================
   MCP — the /mcp page's own pieces (site/src/components/McpPills.astro, ConnectSteps.astro; 27.10.2026)
   Requires: tokens.css, word-pills.css, prism.css
   ============================================================ */

/* ---------- McpPills: the hero headline (live embed/birch-mcp-hero-embed.html) ----------
   Sizes in em of the pill size, as the WordPills frame. */
.mcp-pills__bubble { position: relative; flex: none; width: 1.846em; } /* 96 at 52 */
.mcp-pills__bubble img { display: block; width: 100%; height: auto; }
.mcp-pills__dots { position: absolute; left: 50%; top: 42%; display: flex; gap: 0.077em; transform: translate(-50%, -50%); }
.mcp-pills__dots i { width: 0.269em; height: 0.269em; border-radius: 50%; background: var(--color-text-grey); animation: mcp-typing 1.3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both; }
.mcp-pills__dots i + i { animation-delay: 0.13s; }
.mcp-pills__dots i + i + i { animation-delay: 0.26s; }
@keyframes mcp-typing {
  0% { opacity: 0.3; transform: translateY(0.12em); }
  16% { opacity: 1; transform: translateY(-0.15em); }
  38%, 100% { opacity: 0.3; transform: translateY(0.12em); }
}
.mcp-pills__swap .word-pill { display: flex; align-items: center; } /* the mark before the name, on its line */
.mcp-pills__icon { flex: none; width: 0.85em; height: 0.85em; margin-right: 0.173em; position: relative; top: 0.058em; } /* the pill's padding sits low (optical centre): the mark follows the text */

/* the slot of the last pill: one pill tall, its width set by the script to the face in front */
.mcp-pills__swap { position: relative; flex: none; height: 1.365em; perspective: 16em; }
.mcp-pills__swap .prism { --prism-h: 1.365em; }
.mcp-pills__swap .prism__face { left: 0; top: 0; width: max-content; }
/* measuring: the prism laid flat, every face at its own width */
.mcp-pills__swap.is-measuring { width: auto !important; }
.mcp-pills__swap.is-measuring .prism { position: static; transform: none; transform-style: flat; }
.mcp-pills__swap.is-measuring .prism__face { position: static; transform: none; }
@media (max-width: 47.9375rem) {
  /* phones: the faces centre in the slot */
  .mcp-pills__swap .prism__face { left: 50%; transform: translateX(-50%) rotateX(var(--fx, 0deg)) translateZ(var(--r)); }
}
@media (prefers-reduced-motion: reduce) { .mcp-pills__dots i { animation: none; opacity: 0.7; } }

/* ---------- McpAsk: «ask your AI assistant» under the use-cases heading (live embed/birch-mcp-statement-embed.html) ----------
   An input at the H2 size: grey field, the subtle stroke, radius lg. Live pads it 20 × 34 at 1440: snapped to 24 × 32,
   which keeps live's height (110). */
.mcp-ask {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space) var(--space-md);
  background: var(--color-bg-grey);
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  opacity: 0;
  transform: translateY(var(--reveal-rise));
  --motion-dur: var(--duration-reveal); /* the Reveal character: the field rises in as the block scrolls into view */
  --motion-ease: var(--ease-reveal);
  transition: opacity var(--motion-dur) var(--motion-ease), transform var(--motion-dur) var(--motion-ease);
}
.mcp-ask.is-in { opacity: 1; transform: none; }
.mcp-ask__field { display: flex; align-items: center; gap: var(--space-xs); } /* live 7: the caret after the last letter */
.mcp-ask__typed { white-space: nowrap; }
.mcp-ask__typed::before { content: '\200B'; } /* a full line box before the first letter: the pill does not jump */
.mcp-ask__caret { flex: none; width: 0.06em; height: 0.78em; background: currentColor; animation: mcp-caret 1.06s steps(1) infinite; }
.mcp-ask.is-typed .mcp-ask__caret { animation: none; opacity: 0; transition: opacity var(--duration-toggle) var(--ease-toggle); }
@keyframes mcp-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.mcp-ask__logos { display: flex; align-items: center; gap: var(--space-xs); }
.mcp-ask__logo { flex: none; width: 2.5rem; height: 2.5rem; object-fit: contain; opacity: 0; transform: scale(0.6); transition: opacity var(--duration-reveal) var(--ease-reveal), transform var(--duration-reveal) var(--ease-reveal); }
.mcp-ask.is-typed .mcp-ask__logo { opacity: 1; transform: none; }
.mcp-ask.is-typed .mcp-ask__logo:nth-child(2) { transition-delay: var(--reveal-step); }
.mcp-ask.is-typed .mcp-ask__logo:nth-child(3) { transition-delay: calc(2 * var(--reveal-step)); }
/* the statement's air and the heading → field gap are the .statement / .statement--field patterns (patterns.css) */
@media (max-width: 47.9375rem) {
  /* phones: the marks step out of the field and sit under it; the field alone is the input (live 12 × 21 at 32).
     The heading, the field and the marks are one centred composition here (the .statement pattern) */
  /* the field's line does not wrap (it types): at H2 it is wider than a 320 screen — on phones one step down, H3 */
  .mcp-ask { font-size: var(--text-h3-size); line-height: var(--text-h3-lh); letter-spacing: var(--text-h3-ls); }
  .mcp-ask { flex-direction: column; align-items: center; gap: var(--space-sm); padding: 0; background: none; border: 0; border-radius: 0; }
  .mcp-ask__field { max-width: 100%; padding: var(--space-sm) var(--space); background: var(--color-bg-grey); border: var(--border-thin) solid var(--color-border-subtle); border-radius: var(--radius-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .mcp-ask, .mcp-ask__logo { transition: none; }
  .mcp-ask__caret { animation: none; }
}

/* ---------- ConnectSteps: «How to connect Birch to your AI tool» (live /mcp, 27.10.2026) ---------- */
.connect__tabs { display: grid; width: 100%; grid-auto-columns: minmax(0, 1fr); margin-bottom: var(--grid-gap); }
.connect__mask { display: inline-block; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; } /* the ChatGPT mark is white: drawn in the tab's own colour */
.connect__pick { display: none; }
.connect__steps { row-gap: var(--grid-gap); }
.connect__steps[hidden] { display: none; }
/* a step: the title on top, the text and the code on the card's bottom; cards as tall as live (440 × 374 at 1440) */
.connect__step { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-lg); } /* a step's own layout: the card grid's card class used to give the column */
.connect__body { display: grid; gap: var(--space-sm); }
.connect__body p { margin: 0; }
@media (min-width: 48rem) { .connect__step { min-height: calc(3 * var(--space-2xl)); } } /* 360: every tool's cards as tall as live's, two or three in a row */
/* phones: a native dropdown of the tools instead of the tabs; the steps one under another */
@media (max-width: 47.9375rem) {
  .connect .connect__tabs { display: none; } /* over tabs.css's phone grid */
  .connect__pick { display: block; margin-bottom: var(--grid-gap); }
}