/*-- Segment Structure --*/
seghead {
	max-width: max-content;
	min-width: 4rem;
	flex: 0 2 auto;
}
cardcon {
	flex: 1 1 auto;
	overflow-y: hidden;

	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
}
seghead { 
	display: flex; 
	flex-flow: column;
	justify-content: space-between;
}

/*-- Segment Variable --*/
seg {
	--seg-bg-color: #ccc;
	--seg-name-color: #444;
	--seg-sum-color: white;
	--seg-name-input-bg-color: white;
	--seg-name-input-max-width: 20rem;


	--seg-gap: .125rem;
	--seg-pad: 0; /*0 .25rem;*/

	--seg-iconbar-height: 3rem;
	--seg-head-btn-size: 2rem;
	--seg-head-btn-gap: .25rem;

	--seg-name-font-size: 2rem;
	--seg-sum-font-size: 2.5rem;

    --seg-resizer-gap: .5rem;

    --seg-max-height: 16rem;
}

/*-- Segment Style --*/
seg { background: var(--seg-bg-color); 
	margin: var(--seg-gap); /* the line between rows & cols */
	padding: var(--seg-pad);
    max-height: var(--seg-max-height);
}

seghead { font-weight: bold; margin-left: var(--seg-resizer-gap); 
    position: relative; } /* ~~~ */

seghead sum { 
	color: var(--seg-sum-color);
	font-size: var(--seg-sum-font-size);
}

seghead iconbar { 
	/* height: var(--seg-iconbar-height); */
	display: flex;
}
seghead iconbar btn { 
	width: var(--seg-head-btn-size);
	height: var(--seg-head-btn-size);
	margin: var(--seg-head-btn-gap);
	cursor: pointer;
}

seghead .add { background: #aeaeae; border-radius: 50%; }
seghead .add img { 
	filter: invert(90%);
	object-fit: contain;
	transform:scale(75%);
}

.segname { 
	color: var(--seg-name-color);
	font-size: var(--seg-name-font-size);
	font-stretch: ultra-condensed;
}
label.segname {
	min-width: 3rem; 
	min-height: 2.25rem; 
	overflow: hidden;
}
label.segname:hover { /* ~~~ */
    color: transparent !important;
}
label.segname:hover::before { /* ~~~ */
    background: whitesmoke;
    color: var(--seg-name-color);
    content: attr(data-text);
    position: absolute;
}
.view-only label.segname.spare {
    color: #66a;
}
.view-only label.segname.spare:empty:before {
    content: 'Spare';
    color: #66a4;
}
label.segname.editable { cursor: pointer; color: #66a; }
label.segname.editable:empty:before {
    content: 'Spare…';
    color: #66a4;
}
input.segname { background: var(--seg-name-input-bg-color);
				max-width: var(--seg-name-input-max-width);
				overflow: visible; 
                position: absolute; z-index: 100; } /* ~~~ */


/*----- Sortable -----*/
.sort { background: yellow; }
.ghost { background: yellow; }
.ghost>.con { opacity: 0.25; }

.drag-tag {
	--tag-text-color: #8882;
	--tag-remove-btn-color: #8882;
}
.ghost-tag {
	/*background-color: yellow;*/
	--tag-bg: yellow;
	--tag-hover: yellow;
	--tag-text-color: black;
	--tag-remove-btn-color: black;
}