/* The connection's checklist (connect-checklist.js; the CEO's walk of #950, 9 November 2026). The Terminal's own tokens:
   --purple (the accent), --muted, --line, --surface, in both themes. */
.connect-checklist{display:block}
.connect-checklist[hidden]{display:none}
.card.connect-checklist{margin-bottom:24px}
.connect-title{font-size:1.15rem;margin:0 0 16px}
.connect-steps{display:grid;gap:10px;margin:0;padding:0}
.connect-step{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:12px;align-items:center;min-height:24px}
.connect-step-said{font-size:.9375rem;line-height:1.45;color:var(--ink,#24212d)}
.connect-step.is-done .connect-step-said{color:var(--muted)}
.connect-step.is-current .connect-step-said{font-weight:600}
.connect-dot{width:20px;height:20px;border-radius:50%;box-sizing:border-box;border:2px solid var(--line);display:inline-grid;place-items:center;flex:none;background:transparent}
.connect-step.is-current .connect-dot{border-color:var(--purple)}
.connect-dot.is-done{background:var(--purple);border-color:var(--purple)}
.connect-n{font-size:.6875rem;font-weight:700;line-height:1;color:var(--muted)}
.connect-step.is-current .connect-n{color:var(--purple)}
.connect-dot svg{width:14px;height:14px;fill:none;stroke:var(--surface,#fff);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.connect-action{grid-column:2;display:grid;gap:8px;margin-top:8px;justify-items:start}
.connect-action .meta,.connect-code{margin:0}
.connect-code{font-size:.9rem}
.connect-paste{display:flex;gap:8px;width:100%;max-width:520px;align-items:stretch}
.connect-paste .input{flex:1 1 auto;min-width:0}
.connect-paste .btn{flex:none}
.connect-status{margin-top:12px}
.connect-folded{display:flex;align-items:center;gap:12px;font-size:.9375rem;font-weight:600}
.card.connect-checklist[data-connected=yes]{padding-top:14px;padding-bottom:14px}
@media (max-width:600px){
  .connect-action{justify-items:stretch}
  .connect-open{width:100%}
  .connect-paste{max-width:none}
}
.connect-checklist.ha-connect{margin-top:16px}
/* Add agent's dialog stays light in both themes (add-agent.css): the list takes its colours there. */
.harmony-add-agent .connect-checklist{--ink:var(--ha-ink);--muted:var(--ha-muted);--line:var(--ha-line);--surface:#fff;--purple:var(--ha-purple);color:var(--ha-ink)}
.harmony-add-agent .connect-checklist .btn{background:#fff;color:var(--ha-ink);border-color:var(--ha-line)}
.harmony-add-agent .connect-checklist .btn.primary{background:var(--ha-purple);border-color:var(--ha-purple);color:#fff}
.harmony-add-agent .connect-checklist .input{background:#fff;color:var(--ha-ink);border-color:#dcd8e6}
/* The three steps in one window (the Founder, 9 November 2026): the message's Copy in step 1, the agent's ask in step 2. */
.connect-action .agent-message{width:100%;max-width:520px;margin:0}
.connect-ask{margin:0;font-size:.9rem}
.connect-answer{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.connect-waiting{margin:0}
@media (max-width:600px){.connect-answer .connect-approve{flex:1 1 auto}}
.harmony-add-agent .connect-checklist p{margin:0}
/* An ask approved where it was shown (join-ask.js): "Approved." and the next step under it, in the same place. */
.join-next{display:grid;gap:10px;margin-top:12px;width:100%}
.join-next-said{margin:0;font-weight:600}
.join-next .connect-checklist{padding:0}
.agent-asking .join-next{padding:0 14px 14px}
/* An agent whose connection is not complete has only its checklist (the Founder, 9 November 2026). */
.connect-gate{max-width:640px}
/* The Connected line's last answer, and the Connection tab's one small More (the Founder, 10 November 2026). */
.connect-last{margin:6px 0 0 32px}
.connection-more{margin-top:4px}
.connection-more>summary{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:4px 2px;font-size:.875rem;color:var(--muted);cursor:pointer;list-style:none}
.connection-more>summary::-webkit-details-marker{display:none}
.connection-more>summary::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.connection-more[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
.connection-more-body{display:grid;gap:16px;margin-top:8px}
.connection-more-body>.section-gap{margin-top:0}
.connect-state{font-weight:600}
.connect-state + .connect-last{margin-left:0}
.connect-checklist>.connect-wake{margin-top:12px}
a.connect-wake{text-decoration:none}