/* Connections module. Tokens only; every selector is under .ks-app and prefixed .ks-con- */

.ks-app .ks-con-btn { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Request sent: neutral. Connected: green tint, like "Joined" on a circle. */
.ks-app .ks-con-btn__state { cursor: default; background: var(--ks-surface-2); color: var(--ks-text); border-color: var(--ks-border-strong); }
.ks-app .ks-con-btn__state:hover { background: var(--ks-surface-2); color: var(--ks-text); }
.ks-app .ks-con-btn__state--joined, .ks-app .ks-con-btn__state--joined:hover { background: var(--ks-accent-soft); color: var(--ks-on-accent-soft); border-color: transparent; cursor: pointer; }

.ks-app .ks-con-tab { min-width: 0; }
.ks-app .ks-con-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ks-app .ks-con-card { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; list-style: none; padding: 16px 18px; }
.ks-app .ks-con-card__who { display: flex; align-items: center; gap: 12px; flex: 1 1 200px; min-width: 0; }
.ks-app .ks-con-card__text { display: grid; gap: 4px; min-width: 0; }
.ks-app .ks-con-card__name { font-size: 1.04rem; line-height: 1.2; color: var(--ks-heading); text-decoration: none; overflow-wrap: anywhere; }
.ks-app .ks-con-card__name:hover { text-decoration: underline; }
.ks-app .ks-con-card__sub { color: var(--ks-text-muted); font-size: .8rem; }
.ks-app .ks-con-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ks-app .ks-con-card__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ks-app .ks-con-card__done { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ks-success-text); }
.ks-app .ks-con-section .ks-card__title { display: flex; align-items: center; gap: 8px; }

@media (max-width: 480px) {
	.ks-app .ks-con-card__actions { width: 100%; }
	.ks-app .ks-con-card__actions .ks-btn { flex: 1 1 auto; }
}