.pec-track-label-column {
  --modality-width: 112px;
  --cell-width: 76px;
  --age-width: 112px;
  --sex-width: 0px;
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--modality-width) + var(--cell-width) + var(--age-width) + var(--sex-width));
  min-width: 0;
  background: #f8f9fa;
  border-right: 1px solid #dce1e5;
  box-sizing: border-box;
}
.pec-track-label-column.pec-has-sex { --sex-width: 52px; }
.pec-track-label-headings {
  display: grid;
  grid-template-columns: var(--modality-width) var(--cell-width) var(--age-width) var(--sex-width);
  height: 24px;
  color: #52606c;
  background: #eef1f4;
  font: 12px/24px Arial, Helvetica, sans-serif;
  text-align: center;
}
.pec-track-label-headings > span { overflow: hidden; }
.pec-merged-label {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  padding: 3px 5px;
  border: 0;
  border-top: 1px solid #dce1e5;
  border-bottom: 1px solid #dce1e5;
  border-left: 1px solid #e2e6ea;
  border-radius: 0;
  background: #f8f9fa;
  color: #26323c;
  text-align: center;
  font: 12px/1.3 Arial, Helvetica, sans-serif;
  cursor: pointer;
  overflow: hidden;
}
.pec-merged-label > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; overflow-wrap: anywhere; }
.pec-label-modality { left: 0; width: var(--modality-width); background: #eef1f4; font-weight: 600; }
.pec-label-modality[data-overlay-guide="true"] > span::after { display: block; content: "mCG lower\A hmCG upper"; white-space: pre-line; margin-top: 6px; color: #52606c; font: 11px/1.35 Arial, Helvetica, sans-serif; }
.pec-label-celltype { left: var(--modality-width); width: var(--cell-width); background: #f3f5f7; font-weight: 600; }
.pec-label-annotation { left: calc(var(--modality-width) + var(--cell-width)); width: calc(var(--age-width) + var(--sex-width)); padding: 1px 4px; font-size: 12px; line-height: 1.2; background: #eef2f5; }
.pec-label-age { left: calc(var(--modality-width) + var(--cell-width)); width: var(--age-width); }
.pec-label-sex { left: calc(var(--modality-width) + var(--cell-width) + var(--age-width)); width: var(--sex-width); font-size: 12px; }
.pec-label-reference { left: 0; width: 100%; justify-content: flex-start; padding-left: 10px; font-weight: 600; }
.pec-merged-label:hover { background: #e5ebf0; }
.pec-merged-label:focus-visible { outline: 2px solid #245580; outline-offset: -2px; }
.pec-merged-label[hidden], .pec-track-label-headings[hidden] { display: none; }
.pec-track-details { max-width: min(600px, 85vw); max-height: 75vh; overflow: auto; padding: 18px; border: 1px solid #cbd3da; border-radius: 3px; color: #26323c; font: 14px/1.5 Arial, Helvetica, sans-serif; }
.pec-track-details::backdrop { background: #0003; }
.pec-track-details p { margin: 0 0 14px; overflow-wrap: anywhere; white-space: pre-line; }
.pec-track-details button { padding: 5px 14px; background: #f8f9fa; border: 1px solid #cbd3da; border-radius: 2px; cursor: pointer; }
.pec-fixed-track-labels .igv-track-label { visibility: hidden !important; pointer-events: none; }
@media (max-width: 640px) {
  .pec-track-label-column { --modality-width: 62px; --cell-width: 44px; --age-width: 56px; }
  .pec-track-label-column.pec-has-sex { --sex-width: 26px; }
  .pec-track-label-headings { font-size: 10px; }
  .pec-merged-label { font-size: 10px; line-height: 1.2; padding: 1px 2px; }
  .pec-label-modality > span { display: none; }
  .pec-label-modality::after { content: attr(data-short); }
  .pec-label-sex > span { display: none; }
  .pec-label-modality[data-overlay-guide="true"] > span::after { display: none; }
  .pec-label-sex::after { content: attr(data-short); }
  .pec-label-annotation > span { display: none; }
  .pec-label-annotation::after { content: attr(data-short); }
}
@media (max-width: 360px) {
  .pec-track-label-column { --modality-width: 50px; --cell-width: 36px; --age-width: 48px; }
  .pec-track-label-column.pec-has-sex { --sex-width: 22px; }
  .pec-track-label-headings { font-size: 9px; }
  .pec-label-age > span { display: none; }
  .pec-label-age::after { content: attr(data-short); }
}