/* Connection check (public/connection-health.js): calm rows, text-backed status, phone first. */
.connection-health[hidden] { display: none; }
.connection-health { margin-bottom: 18px; }
.connection-health .card-head { gap: 12px; }
.ch-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.ch-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.ch-row--red { background: color-mix(in srgb, var(--danger-bg) 55%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 22%, var(--border)); }
.ch-row--amber { background: color-mix(in srgb, var(--warning-bg) 60%, var(--surface)); border-color: color-mix(in srgb, var(--warning) 22%, var(--border)); }
.ch-row--focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent); }
.ch-dot { width: 10px; height: 10px; margin-top: 6px; border-radius: 999px; background: var(--success); }
.ch-row--red .ch-dot { background: var(--danger); }
.ch-row--amber .ch-dot { background: #d97706; }
.ch-copy { display: grid; gap: 3px; min-width: 0; }
.ch-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); font-weight: 600; }
.ch-name .badge { font-size: 11px; }
.ch-title { font-size: 16px; line-height: 1.3; color: var(--text); }
.ch-body { color: var(--text-muted); line-height: 1.5; overflow-wrap: anywhere; }
.ch-note { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text); font-weight: 600; }
.ch-note[hidden] { display: none; }
.ch-act { display: flex; align-items: center; }
.ch-act .btn { min-height: 44px; white-space: nowrap; }
.ch-tag { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.ch-summary { margin: 14px 0 0; color: var(--text-muted); line-height: 1.6; }
.ch-summary strong { color: var(--text); }
.ch-summary--dim { color: var(--text-dim); font-size: 14px; }
.ch-actions { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ch-status { color: var(--text-muted); font-size: 14px; }
@media (max-width: 640px) {
  .ch-row { grid-template-columns: 10px minmax(0, 1fr); padding: 14px; }
  .ch-act { grid-column: 2; }
  .ch-act .btn { width: 100%; justify-content: center; }
  .ch-tag { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-row--focus { transition: none; }
}