/* 19/10 · a /mcp D2 (server/siteD/mcpD.ts): capa com o exemplo de resposta num cartão de código, as secções de hoje
   com as peças D2, os blocos de código com «Copiar», o fecho e o pé com o endpoint. Sem letras azuis: o código vai
   em cinzas, verde e âmbar; o ciano só nos pontos e nos botões. */
.mc-h1 { max-width: 18ch; font-size: clamp(42px, 5.2vw, 76px); }
.mc-vivo { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; font-size: 14px; color: var(--claro); }
.mc-vivo i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 4px rgba(52,211,153,.18); }
.mc-url-l { margin: 18px 0 0; }
.mc-url { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; cursor: pointer;
  font: 600 15px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #F1F5F9; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.mc-url:hover { background: rgba(255,255,255,.1); }
.mc-url:focus-visible { outline: 2px solid var(--ciano); outline-offset: 2px; }

/* os blocos de código */
.mc-cod { margin: 24px 0 0; border-radius: 18px; overflow: hidden; background: #050B14; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 30px 60px -36px rgba(0,0,0,.9); }
.pg-capa-lado .mc-cod { margin: 0; }
.mc-cod-bar { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 8px 6px 16px; border-bottom: 1px solid rgba(255,255,255,.08);
  font: 600 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--fraco); }
.mc-cod-bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-copiar { margin-left: auto; flex: none; min-height: 32px; padding: 0 12px; border: 0; border-radius: 9px; cursor: pointer;
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #E2E8F0; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.mc-copiar:hover { background: rgba(255,255,255,.12); }
.mc-copiar:focus-visible { outline: 2px solid var(--ciano); outline-offset: 2px; }
.mc-cod-nota { margin: 0; padding: 12px 16px 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: #FCD34D; }
.mc-cod pre { margin: 0; padding: 16px; overflow-x: auto; font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; color: #E2E8F0; white-space: pre; }
.mc-k { color: #CBD5E1; }
.mc-s, .mc-a { color: #A7F3D0; }
.mc-c { color: #64748B; }
.mc-u { color: #FCD34D; }

/* as secções de hoje */
.mc-sec .mc-lead { max-width: 64ch; margin: 18px 0 0; }
.mc-sec .h2 + .mc-lead, .mc-sec .etq + .h2 { margin-top: 12px; }
.mc-sec .etq { margin: 0 0 12px; }
.mc-sec .h2 { margin: 0; max-width: 22ch; }
.mc-sec .mono, .mc-sec code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; color: #F1F5F9; }
.mc-sec strong, .mc-sec em { color: #F8FAFC; }
.mc-cit { margin: 0; }
.mc-cit p { margin: 0; max-width: 28ch; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.15; letter-spacing: -.02em; font-weight: 700; color: #F8FAFC; text-wrap: balance; }
.mc-grelha { margin-top: 28px; }
.mc-num { align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 4px 10px; border-radius: 8px;
  font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #E2E8F0; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.mc-fine { max-width: 72ch; margin: 18px 0 0; font-size: 14px; line-height: 1.6; color: var(--fraco); }

/* o pé de hoje */
.mc-pe { padding-bottom: clamp(40px, 5vw, 64px); }
.mc-pe-in { display: grid; gap: 12px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.1); }
.mc-pe p { margin: 0; }
.mc-pe-frase { max-width: 64ch; font-size: 15px; line-height: 1.6; color: var(--claro); }
.mc-pe-end { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--fraco); }
.mc-pe-end code { font: 600 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #F1F5F9; overflow-wrap: anywhere; }
.mc-pe-lig { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.mc-pe-lig a { font-size: 14px; color: var(--claro); text-underline-offset: 4px; }
/* 26/10 · medido a 390 px (Playwright sobre a produção): ligações com 15 a 22 px de altura para o dedo. Crescem para 44-46 px; o espaço à volta fica igual. */
.mc-pe-lig a { display: inline-flex; align-items: center; min-height: 44px; }
.mc-pe-legal { font-size: 13px; line-height: 1.6; color: var(--fraco); }

@media (max-width: 640px) {
  .mc-cod pre { font-size: 12px; }
  .mc-url { font-size: 14px; }
}
/* no telemóvel o texto do fecho fica por cima das pessoas: o véu escurece mais para se ler */
@media (max-width: 860px) { .mc-fecho::before { background: rgba(6,14,26,.74); } }