/* What your AI's hands can touch: MCP best practices (Lab Notes, Nov 2026). Loaded after blog.css and not-paranoid.css
   (the tick list, byline and fold-outs come from there). CSS only: the site CSP allows no script. */

/* settings and command snippets */
.section pre { max-width: 46rem; margin: 18px 0 0; padding: 16px 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px;
  background: #050507; font: 500 0.82rem/1.65 var(--mono); color: var(--body); tab-size: 2; }
.section code { font: 500 0.88em/1.4 var(--mono); color: var(--cyan-lift); overflow-wrap: anywhere; }
.section pre code { font-size: 1em; color: inherit; overflow-wrap: normal; }

/* where the data goes: two zones and the wire between them */
.mc-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; max-width: 60rem; margin-top: 28px; }
.mc-zone { padding: 16px 18px 18px; border: 2px dashed var(--cyan); border-radius: 16px; background: var(--panel); }
.mc-zone.mc-theirs { border-style: solid; border-color: var(--red); }
.mc-zt { margin: 0; font: 700 0.72rem/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); }
.mc-theirs .mc-zt { color: var(--red); }
.mc-node { margin: 10px 0 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--hi);
  font: 600 0.86rem/1.4 var(--mono); }
.mc-node span { display: block; font-weight: 500; font-size: 0.78rem; color: var(--muted); }
.mc-wire { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 9.5rem; padding: 0 10px;
  font: 700 0.7rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; text-align: center; color: var(--red); }
.mc-wire::before { content: ""; width: 100%; height: 3px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--red) 0 10px, transparent 10px 18px); background-size: 36px 3px; }
.mc-wire::after { content: "\25B6"; font-size: 0.9rem; line-height: 1; }
@media (max-width: 720px) {
  .mc-flow { grid-template-columns: 1fr; }
  .mc-wire { flex-direction: row; width: auto; padding: 12px 0; }
  .mc-wire::before { width: 3px; height: 34px; flex: none;
    background: repeating-linear-gradient(180deg, var(--red) 0 10px, transparent 10px 18px); background-size: 3px 36px; }
  .mc-wire::after { content: "\25BC"; }
}
@media (prefers-reduced-motion: no-preference) {
  .mc-wire::before { animation: mc-run 1.1s linear infinite; }
  @keyframes mc-run { to { background-position: 36px 0; } }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 720px) {
  .mc-wire::before { animation-name: mc-fall; }
  @keyframes mc-fall { to { background-position: 0 36px; } }
}

/* repo setup: numbered steps on the timeline rail, with a pulse running down the wire */
.mc-steps { position: relative; counter-reset: mc-step; }
.mc-steps li { counter-increment: mc-step; padding-left: 30px; }
.mc-steps li::before { content: counter(mc-step); left: -13px; top: -2px; width: 24px; height: 24px; display: grid; place-items: center;
  font: 700 0.72rem/1 var(--mono); color: var(--cyan); box-shadow: 0 0 12px rgba(34, 211, 238, 0.45); transition: background 0.25s, color 0.25s; }
.mc-steps li:hover::before { background: var(--cyan); color: var(--bg); }
@media (prefers-reduced-motion: no-preference) {
  .mc-steps::after { content: ""; position: absolute; left: -3px; top: 0; width: 4px; height: 90px; border-radius: 2px; pointer-events: none;
    background: linear-gradient(180deg, transparent, var(--cyan), var(--violet), transparent); filter: drop-shadow(0 0 6px var(--cyan));
    animation: mc-current 6s linear infinite; }
  @keyframes mc-current { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: calc(100% - 90px); opacity: 0; } }
}

/* a long ignore list reads as three balanced columns on wide screens and stays one block to copy */
.section pre.mc-cols { columns: 3 12rem; column-gap: 2.5rem; }

/* Lab Notes index card: the post's own diagram in miniature (the index links this file for it) */
.mc-card-art { display: grid; grid-template-columns: auto minmax(28px, 1fr) auto; align-items: center; align-content: center; row-gap: 18px;
  min-height: 220px; padding: clamp(18px, 4vw, 40px);
  background: radial-gradient(60% 80% at 18% 50%, rgba(34, 211, 238, 0.14), transparent 70%),
    radial-gradient(60% 80% at 84% 50%, rgba(248, 113, 113, 0.14), transparent 70%), #07070b; }
.mc-ca-zone { padding: 16px 14px; border: 2px dashed var(--cyan); border-radius: 14px; background: var(--bg);
  font: 700 0.74rem/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; text-align: center; color: var(--cyan); }
.mc-ca-zone.mc-ca-theirs { border-style: solid; border-color: var(--red); color: var(--red); }
.mc-ca-wire { height: 3px; margin: 0 8px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--red) 0 10px, transparent 10px 18px); background-size: 36px 3px; }
.mc-ca-cap { grid-column: 1 / -1; margin: 0; font: 600 0.72rem/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  text-align: center; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .mc-ca-wire { animation: mc-run 1.1s linear infinite; }
}

/* sees / never sees */
.panel.mc-no h3 { color: var(--green); }
.panel.mc-yes h3 { color: var(--red); }
.panel ul { margin: 12px 0 0; padding-left: 1.1rem; color: var(--body); }
.panel li { margin-top: 6px; }