/* Preserve the approved Liquid Glass palette and shell. The connection, its
   pairing controls and webhook stay together; a 3-column checklist stacks at 700px. */
.connections-page { max-width: 1240px; width: 100%; align-self: center; margin: 0 auto; }
.connections-page h1 { font-size: 28px; }
.connections-page h2 { font-size: 19px; margin: 0 0 8px; }
.connections-page p { font-size: 14px; line-height: 1.55; color: var(--muted); }
.connections-page button { min-height: 40px; font-size: 14px; }
.connection-start { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px; border:1px solid var(--line); background:var(--surface); border-radius:16px; }
.connection-start p { max-width:580px; margin:0; }
.connection-create-actions { flex-shrink:0; }
.connection-steps { list-style:none; padding:24px 0; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.connection-steps li { display:flex; align-items:center; gap:12px; }
.connection-steps li>span { display:grid; place-items:center; width:30px; height:30px; flex-shrink:0; border:1px solid var(--line); border-radius:50%; font-size:13px; color:var(--muted); }
.connection-steps strong,.connection-steps small { display:block; line-height:1.6; }
.connection-steps strong { font-size:14px; font-weight:500; }
.connection-steps small { color:var(--muted); font-size:12px; }
.connection-list { display:grid; gap:20px; }
.channel-panel { padding:24px; background:var(--surface); border:1px solid var(--line); border-radius:16px; min-width:0; }
.channel-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.channel-header>div { min-width:0; }
.channel-header h2 { margin:8px 0 0; overflow-wrap:anywhere; }
.channel-header p { margin:4px 0 0; }
.channel-provider { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
.channel-status { flex-shrink:0; padding:5px 10px; font-size:12px; border:1px solid var(--line); border-radius:20px; color:var(--muted); }
.channel-status.is-connected { color:var(--ink); border-color:var(--accent); }
.channel-checks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; border-top:1px solid var(--line); padding-top:20px; margin-top:20px; }
.channel-checks span,.channel-checks strong { display:block; }
.channel-checks span { font-size:12px; color:var(--muted); margin-bottom:5px; }
.channel-checks strong { font-size:14px; font-weight:500; font-variant-numeric:tabular-nums; }
.channel-actions,.pairing-buttons { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:20px; }
.connection-error { padding:12px 16px; border-left:3px solid var(--accent); background:var(--tint); color:var(--ink)!important; overflow-wrap:anywhere; }
.channel-webhook,.connection-help { margin-top:24px; border-top:1px solid var(--line); padding-top:20px; }
.channel-webhook summary,.connection-help summary { cursor:pointer; font-size:14px; font-weight:500; min-height:28px; }
.channel-webhook label { display:grid; gap:8px; font-size:13px; }
.channel-webhook input { min-width:0; width:100%; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:12px; font-size:14px; }
.connection-help { margin-bottom:24px; }
.connection-help li { margin-bottom:10px; color:var(--muted); font-size:14px; line-height:1.6; }
.pairing-panel { border-top:1px solid var(--line); margin-top:24px; padding-top:24px; }
.pairing-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.pairing-heading h3 { margin:0; font-size:18px; }
.pairing-heading p { margin:4px 0 16px; }
.pairing-body { display:grid; grid-template-columns:264px minmax(0,1fr); gap:32px; align-items:center; }
.pairing-code { min-height:264px; padding:16px; border:1px solid var(--line); border-radius:12px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:16px; text-align:center; font-size:14px; color:var(--muted); }
.pairing-code img { width:232px; height:232px; max-width:100%; object-fit:contain; background:#fff; border-radius:4px; }
.pairing-instructions ol { padding-left:20px; margin:0; }
.pairing-instructions li { font-size:14px; line-height:1.7; padding:4px 0; }
.pairing-instructions small { display:block; font-size:12px; color:var(--muted); margin-top:16px; }
.pairing-instructions h4 { margin:0; font-size:16px; }
.connection-empty p { margin-bottom:0; }
@media(max-width:1000px) { .connection-start { align-items:flex-start; flex-direction:column; } }
@media(max-width:700px) {
  .connection-steps { grid-template-columns:1fr; gap:14px; padding:20px 0; }
  .channel-panel,.connection-start { padding:18px; }
  .channel-header { flex-direction:column; }
  .channel-checks { grid-template-columns:1fr; gap:14px; }
  .channel-checks>div { display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
  .channel-checks strong { text-align:right; }
  .pairing-body { grid-template-columns:1fr; gap:20px; }
  .pairing-code { width:264px; max-width:100%; justify-self:center; }
  .connections-page button { min-height:44px; }
  .connection-create-actions { width:100%; }
}