/* cartesianecu.com/integrations/: the pages of the Integrations menu (owner 2026-11-15). The MCP page
   (/integrations/mcp/) is built from the site's own parts (the page card's hero, the section heads, the steps, the
   comparison table, the questions); this sheet adds only what those do not have: one repair told in words beside the
   hero's text, the steps and the facts in the page's columns, the tools table's own measures, and the list of the
   supported control units with its filter. No picture, no mock-up: every block is text the page really holds. */

/* ---- the hero: one repair as Claude reports it (a figure of words on the page card) ---- */
.mcp-hero .dist-hero-in{align-items:end}
.mcp-ex{margin:0;padding:22px 24px 18px;border:1px solid var(--card-line);border-radius:16px;background:color-mix(in srgb,var(--card-ink) 5%,transparent);color:var(--card-ink);min-width:0}
.mcp-ex-row{display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 16px;align-items:baseline}
.mcp-ex-row + .mcp-ex-row{margin-top:16px;padding-top:16px;border-top:1px solid var(--card-line)}
.mcp-ex-who{font:500 12.5px/1.5 var(--mono);color:var(--card-ink3)}
.mcp-ex-say{margin:0;font-size:16px;line-height:1.5;font-weight:500;overflow-wrap:anywhere}
.mcp-ex-out{margin:0;display:grid;gap:10px;min-width:0}
.mcp-ex-out > div{display:grid;gap:2px;min-width:0}
.mcp-ex-out dt{font-size:13px;line-height:1.4;color:var(--card-ink3)}
.mcp-ex-out dd{margin:0;font-size:15px;line-height:1.5;color:var(--card-ink2);overflow-wrap:anywhere}
.mcp-ex-out dd[dir="ltr"]{font-family:var(--mono);font-size:14px;text-align:start;unicode-bidi:plaintext}
.mcp-ex figcaption{margin-top:16px;font-size:13px;line-height:1.5;color:var(--card-ink3)}

/* ---- the three steps: the home page's steps in three columns ---- */
.mcp .mcp-steps{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---- the four tools: the plans' comparison table, with the tool's own name under its words ---- */
.mcp-tools th,.mcp-tools td{vertical-align:top}
.mcp-tools thead th,.mcp-tools thead th + th{text-align:start;width:auto}
.mcp-tools tbody th{width:27%}
.mcp-tools tbody th > span{display:block;font-weight:600}
.mcp-tools tbody th small{font-family:var(--mono);font-size:12.5px;overflow-wrap:anywhere}
.mcp-tools td{width:auto;text-align:start;font-family:inherit;font-weight:400;font-size:15px;line-height:1.55;font-variant-numeric:normal;color:var(--text)}
.mcp-tools td:last-child{width:27%;color:var(--muted)}
.mcp-tools tbody tr:nth-child(2) td:last-child{color:var(--text)}

/* ---- what holds for every repair: four facts in the page's cards ---- */
.mcp-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.mcp-fact{background:var(--card-in);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--card-shadow);min-width:0}
.mcp-fact h3{margin:0 0 8px;font-size:18px;line-height:1.3;letter-spacing:-.01em}
.mcp-fact p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}

/* ---- the supported control units: the filter, the two numbers, then every maker with its units ---- */
.mu{background:var(--card-in);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--card-shadow);padding:24px 28px 26px}
.mu-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.mu-find{flex:1 1 320px;min-width:0;min-height:46px;padding:10px 14px;border:1px solid var(--line2);border-radius:12px;background:var(--bg);color:var(--text);font:inherit;font-size:16px}
.mu-find::placeholder{color:var(--muted);opacity:1}
.mu-find:focus{border-color:var(--accent);outline:2px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:0}
.mu-only{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:15px;color:var(--text);cursor:pointer}
.mu-only input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.mu-sum{display:flex;flex-wrap:wrap;gap:6px 32px;margin:18px 0 0;padding-bottom:18px;border-bottom:1px solid var(--line);color:var(--muted);font-size:15px}
.mu-sum b{font:600 22px/1.2 var(--mono);color:var(--text);margin-inline-end:6px;font-variant-numeric:tabular-nums}
.mu-g{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 24px;padding:20px 0;border-bottom:1px solid var(--line)}
.mu-g[hidden]{display:none}
.mu-g:last-child{border-bottom:0;padding-bottom:4px}
.mu-g > h3{margin:0;font-size:16px;line-height:1.5;letter-spacing:-.01em}
/* the units read down each column, in the names' own order (columns, not a grid: a grid would read across) */
.mu-list{list-style:none;margin:0;padding:0;columns:4 176px;column-gap:24px}
.mu-list li{break-inside:avoid;padding:3px 0;font-size:14.5px;line-height:1.5;overflow-wrap:anywhere}
.mu-list li[hidden]{display:none}
.mu-list a{color:var(--text);text-decoration:none}
@media (hover:hover){.mu-list a:hover{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}}
.mu-list a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.mu-list li[data-c] > a,.mu-list li[data-c] > span{color:var(--muted)}
.mu-list small{font-size:12.5px;color:var(--muted);white-space:nowrap}
.mu-none{margin:20px 0 0;color:var(--muted)}
.mu-note{margin:18px 0 0;color:var(--muted);font-size:14.5px;line-height:1.6;max-width:78ch}

@media (max-width:1000px){
  .mcp-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:920px){
  .mcp-hero .dist-hero-in{align-items:stretch}
  .mcp .mcp-steps{grid-template-columns:minmax(0,1fr);gap:16px}
  .mu-g{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .mcp-ex{padding:18px 16px 14px}
  .mcp-ex-row{grid-template-columns:minmax(0,1fr)}
  .mcp-facts{grid-template-columns:minmax(0,1fr)}
  .mu{padding:18px 16px 20px}
  .mu-list{columns:2 140px;column-gap:16px}
  /* the tools table as three stacked lines per tool: a phone has no room for three columns */
  .mcp-tools thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .mcp-tools,.mcp-tools tbody,.mcp-tools tr,.mcp-tools th,.mcp-tools td{display:block;width:auto}
  .mcp-tools tbody th,.mcp-tools td:last-child{width:auto}
  .mcp-tools tbody th{padding:16px 16px 4px;border-bottom:0}
  .mcp-tools td{padding:2px 16px;border-bottom:0}
  .mcp-tools td:last-child{padding-bottom:16px;border-bottom:1px solid var(--line)}
  .mcp-tools tbody tr:last-child td:last-child{border-bottom:0}
}