/* "Attached to this" — tasks and notes on a record.
   Every colour is a theme token with a fallback; nothing here is hardcoded,
   because the phone-theming pass exists precisely because that was let slide
   elsewhere. */
.pbjcrm-pins-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pbjcrm-pins-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border: 1px solid var(--pbjcrm-border, #d8dce0);
	border-radius: var(--pbjcrm-radius-sm, 3px);
	background: var(--pbjcrm-surface, #fff);
}

.pbjcrm-pins-kind {
	flex: 0 0 auto;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--pbjcrm-muted, #646d76);
}

/* ⛔ A GROWN BOX MUST ALSO HAVE A WIDTH OF ITS OWN — the 1.41.2 lesson, applied
   at the point it was learned rather than after somebody reports it again. */
.pbjcrm-pins-title {
	flex: 1 1 auto;
	min-width: 120px;
	color: var(--pbjcrm-text, #1d2327);
	overflow-wrap: anywhere;
}

.pbjcrm-pins-where {
	margin: 4px 0 0;
}

.pbjcrm-pins-target {
	color: var(--pbjcrm-text-soft, var(--pbjcrm-muted, #646d76));
}

@media (max-width: 782px) {
	.pbjcrm-pins-row {
		flex-wrap: wrap;
	}

	.pbjcrm-pins-title {
		flex: 1 1 100%;
	}
}