/* connections.js (google.js, slack.js): the Share home's Connections tab.
 * One section per connection: a head (name + state), a note, and the unread
 * items that need the person, in the panel's file-row style. */

.cn-sec { display: grid; gap: var(--sv-space-2); }
.cn-head, .cn-note { padding: 0 var(--sv-space-2); }
.cn-head { display: flex; align-items: center; gap: var(--sv-space-2); min-height: 32px; }
.cn-head .icon { color: var(--sv-ink-secondary); }
.cn-state { margin-left: auto; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.cn-note { margin: 0; color: var(--sv-ink-secondary); font-size: var(--ui-meta); line-height: 1.45; }
.cn-sec .pn-sec-head { margin: var(--sv-space-1) 0 0; }
.cn-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-1); }
.cn-foot .pn-time { margin-right: auto; padding-left: var(--sv-space-2); }
.cn-btn { display: inline-flex; align-items: center; gap: var(--sv-space-1); justify-self: start; min-height: 30px; font-size: var(--ui-meta); }
.cn-sec > .cn-btn { margin-left: var(--sv-space-1); }