/* /connect (templates/connect.html): connecting Claude Code or another MCP
   client. The chrome, the band and .pub-command come from public.css.
   Tokens only. */

/* The band's text lines up with the narrow column under it. */
.cn-hero .pub-hero-inner { max-width: calc(780px - 2.5rem); }

.cn-wrap { display: flex; flex-direction: column; gap: 2.2rem; }
.cn-wrap p { margin: 0 0 0.6rem; color: var(--text-2); }
.cn-wrap code {
    font-family: var(--font-mono); font-size: 0.86em;
    background: var(--surface-4); padding: 0.1rem 0.32rem; border-radius: var(--radius-xs);
}
.cn-wrap .pub-command code { background: none; padding: 0; font-size: inherit; }
.cn-wrap .pub-command { margin-bottom: 0.6rem; }
.cn-section .pub-section-title, .cn-card .pub-section-title { margin-bottom: 0.7rem; }
.cn-note { font-size: 0.86rem; }
.cn-wrap p.cn-note { color: var(--text-3); margin-bottom: 0; }

.cn-card { padding: 1.4rem 1.5rem 1.3rem; }
.cn-steps { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.cn-step { display: flex; gap: 0.9rem; align-items: flex-start; }
.cn-step-num {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%; margin-top: 0.05rem;
    background: var(--accent-bg); color: var(--accent-deep);
    font-size: 0.82rem; font-weight: 700;
}
.cn-step-body { flex: 1; min-width: 0; }
.cn-wrap .cn-step-body p:last-child { margin-bottom: 0; }
.cn-wrap .cn-step-title { font-weight: 650; color: var(--text-strong); margin-bottom: 0.15rem; }

.cn-features { list-style: none; margin: 0 0 0.8rem; padding: 0; display: grid; gap: 0.65rem; }
.cn-features li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--text-2); font-size: 0.94rem; }
.cn-features strong { color: var(--text-strong); font-weight: 650; }
.cn-icon {
    flex-shrink: 0; width: 18px; height: 18px; margin-top: 0.18rem;
    fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.cn-list { margin: 0 0 0.6rem; padding-left: 1.2rem; color: var(--text-2); font-size: 0.94rem; }
.cn-list li { margin: 0.2rem 0; }
.cn-list strong { color: var(--text-strong); font-weight: 650; }

@media (max-width: 640px) {
    .cn-wrap { gap: 1.8rem; }
    .cn-card { padding: 1.1rem 1rem 1rem; }
    .cn-step { gap: 0.7rem; }
}