/* =========================================================================
   MCP HERO DEMO (#mcpHeroDemo).
   See src/components/McpHeroDemo.astro for the storyboard.
   Timeline: public/js/mcp-hero-demo.js toggles `is-*` classes on the root
   and on each panel.

   Three surfaces (Claude, Clive, a terminal) all reaching the same live
   figure — the Clive panel populates first, then Claude, then the
   terminal, each flashing once with a highlight ring. Same --xxx-*
   palette likeness rules as every other demo on the site.
   ========================================================================= */

.mhd {
  --mhd-canvas: #FAF9F5;
  --mhd-card: #FFFFFF;
  --mhd-border: #DBDBDE;
  --mhd-line: #EAEAEA;
  --mhd-head: #F6F6F7;
  --mhd-ink: #2B2B2B;
  --mhd-ink2: #777777;
  --mhd-accent: #6A5BC6;
  --mhd-accent-soft: #ECECFF;
}

.mhd__stage {
  position: relative; overflow: hidden; width: 100%;
  aspect-ratio: 3 / 2; min-height: 380px; max-width: 640px; margin: 0 auto;
  background: var(--mhd-canvas);
  display: flex; flex-direction: column;
  transition: opacity .5s ease;
}
.mhd.is-out .mhd__stage { opacity: 0; }

.mhd__topBar {
  flex: none; font-size: 11px; font-weight: 600; color: var(--mhd-ink);
  padding: 12px 14px 9px; border-bottom: 1px solid var(--mhd-line);
  white-space: nowrap;
}

.mhd__row { flex: 1; min-height: 0; display: flex; align-items: center; gap: 10px; padding: 16px; }

.mhdPanel {
  flex: 1; min-width: 0; height: 100%;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--mhd-card); border: 1.5px solid var(--mhd-border); border-radius: 10px;
  padding: 12px 10px;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.mhdPanel.is-lit { border-color: var(--mhd-accent); box-shadow: 0 0 0 3px var(--mhd-accent-soft); }
.mhdPanel__label {
  margin: 0; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mhd-ink2);
}
.mhdPanel__body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; }

/* Claude panel — a small chat bubble */
.mhdChatLine {
  margin: 0; font-size: 9.5px; color: var(--mhd-ink2); background: var(--mhd-head);
  border-radius: 6px; padding: 5px 7px;
}
.mhdChatVal { margin: 0; font-size: 15px; font-weight: 700; color: var(--mhd-ink); font-variant-numeric: tabular-nums; }

/* Clive panel — a table row */
.mhdTableRow {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--mhd-head); border: 1px solid var(--mhd-border); border-radius: 6px; padding: 8px;
}
.mhdTableRow__label { font-size: 9px; color: var(--mhd-ink2); }
.mhdTableRow__val { font-size: 15px; font-weight: 700; color: var(--mhd-ink); font-variant-numeric: tabular-nums; }

/* Terminal panel — monospace JSON */
.mhdPanel--code { background: #232228; border-color: #232228; }
.mhdPanel--code .mhdPanel__label { color: #9b9aa3; }
.mhdCode {
  margin: 0; font-family: var(--font-mono, monospace); font-size: 9px; line-height: 1.5;
  color: #D6D5DC; white-space: pre;
}
.mhdCode span { color: #B8ACF6; font-weight: 600; }

@media (max-width: 460px) {
  .mhd__stage { aspect-ratio: auto; min-height: 420px; }
  .mhd__row { flex-direction: column; gap: 8px; }
  .mhdPanel { width: 100%; height: auto; }
}