.connection-directory {max-width:1400px;margin:auto}
.connection-directory-intro {margin:0 0 24px;max-width:80ch;line-height:1.65;color:#455b4d}
.connection-filters {display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.connection-filters label {display:grid;gap:8px;flex:1 1 210px;font-size:13px;font-weight:600}
.connection-filters label:first-child {flex:2 1 300px}
.connection-filters :is(input,select) {width:100%;height:48px;box-sizing:border-box;min-width:0;background:#fff;border:1px solid #bcc8bf;border-radius:7px;padding:10px 12px;color:#233b2d;font:inherit}
.connection-filters .button {min-height:48px}
.connection-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:20px}
.connection-card {min-width:0;box-sizing:border-box;padding:24px;border:1px solid var(--app-line,#d4dcd3);border-radius:12px;background:var(--app-surface,#fffaf3)}
.connection-card[hidden],.connection-directory [hidden] {display:none!important}
.connection-card>small {font-size:11px;letter-spacing:.06em;color:#52705b}
.connection-card h3 {font-size:21px;line-height:1.25;margin:14px 0 12px}
.connection-card p,.connection-card li {font-size:14px;line-height:1.65;color:#455b4d;overflow-wrap:anywhere}
.connection-card .connection-requirements {font-size:12px}
.connection-actions {display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 10px}
.connection-actions .button,.connection-card>.button {white-space:normal;text-align:left;max-width:100%}
.connection-instructions {border-top:1px solid #d8dfd5;margin-top:20px;padding-top:15px}
.connection-instructions summary {font-size:14px;line-height:1.5;font-weight:650;cursor:pointer;color:#233b2d}
.connection-instructions ol {padding-left:22px}
.connection-instructions li {padding-left:4px;margin:10px 0}
.connection-instructions a {font-size:13px;text-underline-offset:3px}
.connection-instructions code {font-size:12px;overflow-wrap:anywhere}
.connection-key-state {display:inline-block;padding:6px 10px;background:#edf2e8;border-radius:6px;font-size:12px!important}
.connection-endpoint {display:flex;align-items:center;gap:10px;background:#edf1e9;border:1px solid #d5ded1;border-radius:7px;padding:12px}
.connection-endpoint code {min-width:0;flex:1}
.connection-endpoint .button {flex-shrink:0}
.connection-downloads {display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}
@media(max-width:800px){.connection-grid {grid-template-columns:1fr}.connection-directory-intro {padding:20px}.connection-directory-symbol {display:none}.connection-card {padding:18px}.connection-endpoint {align-items:start;flex-direction:column}}
