/* SYNAPSE — data feed connectors view (Phase 3, additive stylesheet).
   Uses the charte variables defined in styles.css :root. */

.conn-note {
  font-size: .72rem;
  color: var(--text-3, #5e646d);
  line-height: 1.5;
  margin: .4rem 0 0;
}

.conn-empty {
  font-size: .78rem;
  color: var(--text-3, #5e646d);
  padding: .8rem 0;
}

.conn-item {
  display: grid;
  gap: .35rem;
  padding: .75rem .85rem;
  border: 1px solid var(--line, #2A2E33);
  background: var(--graphite, #101214);
}

.conn-item + .conn-item {
  margin-top: .55rem;
}

.conn-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}

.conn-item-head strong {
  color: var(--white, #F4F6F8);
  font-size: .85rem;
}

.conn-status {
  font-family: var(--ff-mono, monospace);
  font-size: .58rem;
  letter-spacing: .12em;
  padding: .18rem .5rem;
  border: 1px solid currentColor;
}

.conn-status--active { color: var(--accent-good, #7da77b); background: rgba(125, 167, 123, .08); }
.conn-status--error  { color: var(--accent-bad, #b04848);  background: rgba(176, 72, 72, .1); }
.conn-status--paused { color: var(--accent-amber, #D6A64F); background: rgba(214, 166, 79, .08); }

.conn-meta {
  font-size: .7rem;
  color: var(--text-2, #8D949E);
  word-break: break-all;
}

.conn-error {
  font-size: .7rem;
  color: var(--accent-bad, #b04848);
  line-height: 1.45;
}

.conn-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .35rem;
}

.conn-actions .btn {
  font-size: .62rem;
  padding: .35rem .7rem;
}