/* Settings > Connections. Uses only the shared custom properties from
   styles.css. Status is always stated in text, never by colour alone. */
#connections-root{display:block}
#connections-root .conn-group{margin:18px 0 0}
#connections-root h3{font-size:15px;margin:0 0 8px;color:var(--ink)}
#connections-root h4{font-size:14px;margin:0;color:var(--ink)}
#connections-root .conn-muted{color:var(--ink-dim);font-size:13px;margin:4px 0}
#connections-root .conn-card{background:var(--field);border:1px solid var(--line);
  border-radius:10px;padding:14px 16px;margin:10px 0}
#connections-root .conn-card-head{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:8px;margin-bottom:8px}
#connections-root .conn-badges{display:flex;flex-wrap:wrap;gap:6px}
#connections-root .conn-badge{font-size:12px;line-height:1.4;padding:2px 8px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink-dim)}
#connections-root .conn-badge-pass{border-color:var(--pass);color:var(--pass)}
#connections-root .conn-badge-fail{border-color:var(--fail);color:var(--fail)}
#connections-root .conn-badge-warn{border-color:var(--warn);color:var(--warn)}
#connections-root .conn-facts{display:grid;grid-template-columns:minmax(110px,max-content) 1fr;
  gap:4px 14px;margin:0 0 10px;font-size:13px}
#connections-root .conn-facts dt{color:var(--ink-faint)}
#connections-root .conn-facts dd{margin:0;color:var(--ink)}
#connections-root .conn-verify{border-top:1px solid var(--line-soft);padding-top:10px}
#connections-root .conn-confirm{background:var(--accent-soft);border:1px solid var(--line);
  border-radius:8px;padding:10px 12px;margin-top:6px}
#connections-root .conn-confirm p{margin:0 0 8px;font-size:13px}
#connections-root .conn-actions{display:flex;flex-wrap:wrap;gap:8px}
#connections-root .conn-button{font:inherit;font-size:13px;padding:6px 12px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
#connections-root .conn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
#connections-root .conn-button:disabled{opacity:.6;cursor:default}
#connections-root .conn-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#connections-root .conn-result{font-size:13px;margin:8px 0 0;min-height:1em;color:var(--ink)}
#connections-root .conn-later{border:1px dashed var(--line);border-radius:10px;padding:10px 16px;margin:10px 0}
#connections-root .conn-later-title{font-size:13px;font-weight:600;color:var(--ink-dim);margin:0 0 4px}
#connections-root .conn-later ul{margin:0;padding-left:18px;font-size:13px;color:var(--ink-dim)}
#connections-root .conn-accounts{margin-top:14px}
#connections-root .conn-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
#connections-root .conn-table caption{text-align:left;caption-side:top}
#connections-root .conn-table th,#connections-root .conn-table td{text-align:left;padding:6px 8px;
  border-bottom:1px solid var(--line-soft)}
#connections-root .conn-table th{color:var(--ink-faint);font-weight:600}
#connections-root .conn-manage{border-top:1px solid var(--line-soft);margin-top:12px;padding-top:10px}
#connections-root .conn-manage h5{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--ink)}
#connections-root .conn-manage-form{display:grid;grid-template-columns:max-content minmax(0,1fr);
  gap:6px 10px;align-items:center;margin-top:8px}
#connections-root .conn-manage-form label{font-size:13px;color:var(--ink-dim)}
#connections-root .conn-manage-form .conn-muted,#connections-root .conn-actions{grid-column:1/-1}
#connections-root .conn-input{font:inherit;font-size:13px;padding:6px 8px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);min-width:0}
#connections-root .conn-input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
#connections-root .conn-actions{display:flex;flex-wrap:wrap;gap:8px}
#connections-root .conn-audit{width:100%;border-collapse:collapse;font-size:12px;margin-top:6px}
#connections-root .conn-audit th,#connections-root .conn-audit td{text-align:left;padding:5px 8px;
  border-bottom:1px solid var(--line-soft)}
#connections-root .conn-audit th{color:var(--ink-faint);font-weight:600}
@media (prefers-reduced-motion:no-preference){
  #connections-root .conn-button{transition:background-color .15s ease,border-color .15s ease}
}
@media (max-width:560px){
  #connections-root .conn-facts{grid-template-columns:1fr}
  #connections-root .conn-manage-form{grid-template-columns:1fr}
}