/* mcp.qrvote.org and /developers (scripts/pages/mcp.html, developers.html). The app's stylesheet loads first: tokens, fonts, masthead, footer. */
.mcp {
  max-width: 44rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  line-height: 1.55;
}
.mcp h1 {
  font-family: var(--display);
  font-size: clamp(2.1rem, 7vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: 17ch;
}
.mcp h2 {
  font-family: var(--display);
  font-size: 1.45rem;
  margin-bottom: 0.9rem;
}
.mcp code {
  font-family: var(--mono);
  font-size: 0.9em;
}
.mcp-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding-top: 1rem;
}
/* The prize rosette, pinned to the hero like a ribbon on a winning entry. */
.mcp-hero .rosette {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(4.5rem, 14vw, 7.5rem);
  transform: rotate(8deg);
  filter: drop-shadow(0 6px 10px rgba(20, 30, 70, 0.18));
}
.mcp-hero h1,
.mcp-hero .mcp-sub {
  padding-right: clamp(4rem, 13vw, 8rem);
}
.mcp-sub {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 36rem;
}

/* The one thing to copy. */
.mcp-url,
.mcp-cmd {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem;
  padding-inline-start: 1rem;
  background: var(--card);
  border: 2px solid var(--accent);
  border-radius: 14px;
}
.mcp-url code,
.mcp-cmd code {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
  color: var(--ink);
}
.mcp-cmd {
  border-width: 1px;
  border-color: var(--line-strong);
}

/* Tabs: the app picker is a quiet underline row; the demos are pills. */
.mcp-apps,
.mcp-demo-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
}
.mcp-apps [role='tab'] {
  padding: 0.35rem 0;
  font: inherit;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.mcp-apps [aria-selected='true'] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.mcp-app {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  color: var(--ink);
}
.mcp-demo-tabs {
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.mcp-demo-tabs [role='tab'] {
  min-height: 40px;
  padding: 0.4rem 0.95rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
}
.mcp-demo-tabs [aria-selected='true'] {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}
.mcp [role='tab']:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* A mock conversation: you on the right, the assistant on the left, the tool it used between. */
.chat {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.2rem;
  background: var(--accent-soft);
  border-radius: 20px;
}
.chat-you {
  align-self: flex-end;
  max-width: 85%;
  padding: 0.7rem 1rem;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 18px;
  border-end-end-radius: 4px;
}
.chat-tool {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
}
.chat-tool::before {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--gold);
}
.chat-bot {
  align-self: flex-start;
  max-width: 92%;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  background: var(--card);
  border-radius: 18px;
  border-end-start-radius: 4px;
  box-shadow: var(--shadow);
}
.chat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--gold-line);
  border-radius: 12px;
  background: var(--gold-soft);
}
.card-title {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 700;
}
.card-meta {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.chat-card .btn {
  text-decoration: none;
}
.chat-bars {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: min(22rem, 70vw);
}
.chat-bars li {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.92rem;
  border-radius: 6px;
  isolation: isolate;
}
.chat-bars li::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline: 0 auto;
  width: var(--w);
  border-radius: 6px;
  background: var(--accent-soft);
  z-index: -1;
}
.chat-bars li:first-child::before {
  background: var(--gold-soft);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
.chat-orders {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.chat-orders li {
  padding: 0.3rem 0.7rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 999px;
}
.chat-orders li::after {
  content: ' · Zazzle';
  font-weight: 400;
}
.chat-file {
  align-self: flex-start;
  padding: 0.45rem 0.8rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}
.mcp-note {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--faint);
}

.mcp-trust ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem 1.5rem;
}
.mcp-trust b {
  display: block;
  color: var(--ink);
}
.mcp-trust li {
  color: var(--muted);
  padding-inline-start: 0.9rem;
  border-inline-start: 3px solid var(--gold);
}

.mcp-tools summary {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
}
.mcp-tools .table-wrap {
  margin-top: 0.8rem;
}
.mcp-tools td:first-child code {
  white-space: nowrap;
}
.mcp-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  font-size: 0.92rem;
  color: var(--muted);
}

/* /developers: request and response pairs. */
.dev-ex {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.dev-ex-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
}
.dev-ex .dev-code {
  margin: 0;
  white-space: pre;
}
.mcp-trust a {
  font-weight: 600;
}

/* Reference tables: columns on wide screens, one stacked row per entry on phones. */
.mcp .dev-table td:nth-child(3):not(:last-child) {
  white-space: nowrap;
}
@media (max-width: 640px) {
  .mcp .dev-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .mcp .dev-table tr {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.6rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line);
  }
  .mcp .dev-table td {
    padding: 0;
    border: 0;
  }
  .mcp .dev-table td:last-child {
    flex-basis: 100%;
  }
  .mcp .dev-table:not(.dev-ops) td:nth-last-child(2) {
    font-size: 0.85rem;
    color: var(--muted);
    white-space: normal;
  }
  .mcp .dev-table:not(.dev-ops) td:nth-last-child(2)::before {
    content: '· ';
  }
  .mcp .table-wrap {
    overflow: visible;
  }
}

/* Code: highlighted samples (mcp.js) in the site's own colors. */
.dev-code .hl-key {
  color: var(--accent);
}
.dev-code .hl-str {
  color: var(--good);
}
.dev-code .hl-num,
.dev-code .hl-lit {
  color: var(--warn);
}
.dev-code .hl-method {
  color: var(--on-accent);
  background: var(--accent);
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  font-weight: 700;
}
.dev-code .hl-path {
  font-weight: 700;
}

/* The live "Run it" result. */
.mcp-cmd .btn {
  flex: none;
}
.dev-live {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.dev-live .dev-code {
  margin: 0;
  max-height: 22rem;
}
.dev-live-status {
  font-size: 0.9rem;
  color: var(--muted);
}
.dev-live-status .ok {
  color: var(--good);
  font-weight: 700;
}
.dev-live-status .bad {
  color: var(--alert);
  font-weight: 700;
}

/* A demo conversation plays in: you, then the tool, then the answer. The page's one bit of motion. */
@keyframes chat-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
.chat.play > * {
  animation: chat-in 0.35s ease-out both;
}
.chat.play > :nth-child(2) {
  animation-delay: 0.45s;
}
.chat.play > :nth-child(3) {
  animation-delay: 0.9s;
}
.chat-bars li::before {
  transform-origin: left;
}
[dir='rtl'] .chat-bars li::before {
  transform-origin: right;
}
.chat.play .chat-bars li::before {
  animation: bar-grow 0.6s ease-out 1.1s both;
}
@keyframes bar-grow {
  from {
    transform: scaleX(0);
  }
}
html[data-motion='reduce'] .chat.play > *,
html[data-motion='reduce'] .chat.play .chat-bars li::before {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .chat.play > *,
  .chat.play .chat-bars li::before {
    animation: none;
  }
}
@media (max-width: 480px) {
  .mcp-cmd {
    flex-wrap: wrap;
  }
  .mcp-cmd code {
    flex-basis: 100%;
  }
}

/* Copyable starter prompts. */
.mcp-prompts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.8rem;
  margin-top: 0.4rem;
}
.mcp-prompts li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.prompt-title {
  font-weight: 700;
}
.prompt-text {
  flex: 1;
  font-size: 0.92rem;
  color: var(--muted);
}

/* /developers endpoints: grouped (public, your contests), methods as badges. */
.dev-ops td:first-child {
  white-space: nowrap;
}
.dev-ops .dev-group th {
  padding-block: 1.1rem 0.4rem;
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--ink);
  text-align: start;
  border-bottom: 2px solid var(--line);
}
.dev-ops tbody:first-of-type .dev-group th {
  padding-block-start: 0.4rem;
}
.dev-method {
  display: inline-block;
  min-width: 3.9em;
  padding: 0.1rem 0.35rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  border-radius: 4px;
  color: var(--accent);
  background: var(--accent-soft);
}
.dev-method--post {
  color: var(--good);
  background: var(--good-soft);
}
.dev-method--patch,
.dev-method--put {
  color: var(--warn);
  background: var(--warn-soft);
}
.dev-method--delete {
  color: var(--alert);
  background: var(--alert-soft, var(--warn-soft));
}
@media (max-width: 640px) {
  .dev-ops td:first-child {
    flex-basis: 100%;
    white-space: normal;
  }
  .mcp .dev-ops tr.dev-group {
    border-bottom: 0;
    padding-block-end: 0;
  }
  .mcp .dev-ops tr.dev-group th {
    flex-basis: 100%;
    padding-inline: 0;
  }
}

/* /developers: where to find the machine-readable descriptions. */
.dev-links {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 0.6rem 1.5rem;
}
.dev-links li {
  display: flex;
  flex-direction: column;
}
.dev-links a {
  font-weight: 600;
}
.dev-links span {
  font-size: 0.9rem;
  color: var(--muted);
}

/* Prompts quote long URLs: let them wrap inside the card. */
.prompt-text,
.mcp-trust li {
  overflow-wrap: anywhere;
}
.dev-ops .dev-group th span,
.dev-note {
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--muted);
}
.dev-note {
  white-space: nowrap;
}

/* ── /developers: a docs layout ──
   An "On this page" column lined up with the masthead's logo, then a readable
   content column. Code scrolls sideways instead of breaking mid-word. */
.mcp.dev {
  max-width: 1040px;
  display: grid;
  grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.dev-content {
  display: flex;
  flex-direction: column;
  gap: 3.25rem;
  min-width: 0;
  max-width: 46rem;
}
.dev-content h2 {
  scroll-margin-top: calc(var(--head-h) + 1.5rem);
}
.dev-toc {
  position: sticky;
  top: calc(var(--head-h) + 1.5rem);
  padding-top: 1.4rem;
  font-size: 0.9rem;
}
.dev-toc ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0;
  margin: 0;
  border-inline-start: 1px solid var(--line);
}
.dev-toc ol a {
  display: block;
  padding: 0.3rem 0 0.3rem 0.9rem;
  margin-inline-start: -1px;
  color: var(--muted);
  text-decoration: none;
  border-inline-start: 2px solid transparent;
}
.dev-toc ol a:hover {
  color: var(--ink);
}
.dev-toc ol a[aria-current='true'] {
  color: var(--accent);
  font-weight: 600;
  border-inline-start-color: var(--accent);
}
/* Commands and paths: one line, scrolled, never broken mid-word. */
.dev .mcp-cmd code {
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}
/* Prompts: full-width rows (title and text, then Copy), not cramped cards. */
.dev .mcp-prompts {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
}
.dev .mcp-prompts li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'title copy' 'text copy';
  align-items: center;
  column-gap: 1.25rem;
  row-gap: 0.2rem;
}
.dev .prompt-title {
  grid-area: title;
}
.dev .prompt-text {
  grid-area: text;
  overflow-wrap: normal;
}
.dev .mcp-prompts .btn {
  grid-area: copy;
}
/* Signing in: a definition list (term, then what it means), room to breathe. */
.dev .mcp-trust ul {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.dev .mcp-trust li {
  display: grid;
  grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
  column-gap: 1.5rem;
  padding: 0.9rem 0;
  padding-inline-start: 0;
  border-inline-start: 0;
  border-bottom: 1px solid var(--line);
  overflow-wrap: normal;
}
.dev .mcp-trust li code {
  overflow-wrap: anywhere; /* long URLs in running text: last resort only */
}
@media (max-width: 860px) {
  .mcp.dev {
    grid-template-columns: minmax(0, 1fr);
  }
  .dev-toc {
    display: none;
  }
}
@media (max-width: 560px) {
  .dev .mcp-prompts li {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'title' 'text' 'copy';
    align-items: start;
    row-gap: 0.4rem;
  }
  .dev .mcp-prompts .btn {
    justify-self: start;
  }
  .dev .mcp-trust li {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.25rem;
  }
}