/* ============================================================
 * LncACTdb 4.0 — Single-cell Trajectory tool (page-specific)
 * Loaded after tools/lncact-tools.css.
 * ============================================================ */

/* ---- Monocle3 dynamic-pseudotime root-cell hint banner ---- */
.la-tr-roothint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 9px 14px;
  font: 500 12.5px var(--la-font);
  color: var(--la-primary-d);
  background: var(--la-bg-tint, rgba(67, 56, 202, 0.05));
  border: 1px solid var(--la-line);
  border-left: 3px solid var(--la-primary);
  border-radius: 10px;
}
.la-tr-roothint b {
  font-family: var(--la-mono);
  font-weight: 600;
  color: var(--la-ink);
}
.la-tr-roothint i { color: var(--la-primary); }
.la-tr-roothint__tip { color: var(--la-muted); font-weight: 500; }

/* chart height — tall for a full embedding view */
#trChart { height: 700px; }

/* Method select (native <select>, not TomSelect) — match 40px/arrow/hover */
#trMethod{width:100%;min-height:40px;padding:8px 32px 8px 14px;font:500 13.5px var(--la-font);
  color:var(--la-ink-2);border:1px solid var(--la-line);border-radius:10px;cursor:pointer;
  -webkit-appearance:none;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7390'/%3E%3C/svg%3E") no-repeat right 12px center;
  transition:background-color .15s,border-color .15s;}
#trMethod:hover{background-color:var(--la-bg-tint);border-color:rgba(67,56,202,.4);}
#trMethod:focus{outline:none;border-color:var(--la-primary);box-shadow:0 0 0 3px rgba(var(--la-primary-rgb),.12);}

/* cell-count chip in the title */
.la-sc-cells {
  font: 600 12px var(--la-mono);
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: 10px;
  vertical-align: middle;
  color: var(--la-primary-d);
  background: var(--la-bg-tint);
  border: 1px solid var(--la-line);
}

/* ---- select styling (40px height, arrow chevron, hover) ---- */
#trDataset + .ts-wrapper .ts-control,
#trCellType + .ts-wrapper .ts-control,
#trColorBy + .ts-wrapper .ts-control {
  min-height: 34px;
  padding: 8px 32px 8px 14px;
  font-size: 13.5px;
  border-radius: 10px;
  border: 1px solid var(--la-line);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

#trDataset + .ts-wrapper .ts-control:hover,
#trCellType + .ts-wrapper .ts-control:hover,
#trColorBy + .ts-wrapper .ts-control:hover {
  background-color: var(--la-bg-tint, rgba(67, 56, 202, 0.04));
  border-color: rgba(67, 56, 202, 0.4);
}

/* chevron arrow for tom-select dropdowns */
#trDataset + .ts-wrapper.single::after,
#trCellType + .ts-wrapper.single::after,
#trColorBy + .ts-wrapper.single::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 12px;
  width: 6px;
  height: 6px;
  border-left: 2px solid var(--la-muted, #94a3b8);
  border-bottom: 2px solid var(--la-muted, #94a3b8);
  border-right: none;
  border-top: none;
  background: none;
  transform: translateY(-65%) rotate(-45deg);
  transition: transform 0.2s ease, border-color 0.2s ease;
  z-index: 3;
  pointer-events: none;
}

#trDataset + .ts-wrapper.single.dropdown-active::after,
#trCellType + .ts-wrapper.single.dropdown-active::after,
#trColorBy + .ts-wrapper.single.dropdown-active::after {
  transform: translateY(-35%) rotate(135deg);
  border-color: var(--la-primary);
}

/* dataset value dropdown — wider floating panel */
#trDataset + .ts-wrapper .ts-dropdown { width: 420px; }

/* no-wrap + ellipsis on selected item */
#trDataset + .ts-wrapper.single .ts-control,
#trCellType + .ts-wrapper.single .ts-control,
#trColorBy + .ts-wrapper.single .ts-control { flex-wrap: nowrap; overflow: hidden; padding-right: 28px; }
#trDataset + .ts-wrapper.single .ts-control > .item,
#trCellType + .ts-wrapper.single .ts-control > .item,
#trColorBy + .ts-wrapper.single .ts-control > .item {
  flex: 0 1 auto; min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* method + lineage native selects (40px height, styled) */
#trMethod,
#trLineage {
  width: 100%;
  box-sizing: border-box;          /* ← 新增：让 min-height 含 padding/border，跟 ts-control 一致 */
  min-height: 34px;                /* ← 40px → 34px，对齐其它下拉 */
  border: 1px solid var(--la-line);
  border-radius: 10px;
  padding: 8px 32px 8px 14px;
  font: 500 13.5px var(--la-font);
  color: var(--la-ink-2);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* ← 实心三角 ▼ 换成和其它下拉一样的细线 chevron，颜色用 --la-muted 的 #94a3b8 */
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M2 2l4 4 4-4' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  background-size: 12px 8px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


#trMethod:hover,
#trLineage:hover {
  background-color: var(--la-bg-tint, rgba(67, 56, 202, 0.04));
  border-color: rgba(67, 56, 202, 0.4);
}

/* resolution sub-select (shows/hides dynamically) */
.la-sc-reswrap select { width: 100%; min-height: 36px; border: 1px solid var(--la-line); border-radius: 8px;
  padding: 8px 12px; font: 500 13px var(--la-font); color: var(--la-ink-2); cursor: pointer;
  transition: border-color .15s; }
.la-sc-reswrap select:hover { border-color: rgba(67, 56, 202, .4); }

/* lineage wrap */
#trLineageWrap { margin-top: 4px; }

/* Display Settings checkboxes */
.la-sc-display { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--la-line); }
.la-sc-checks { display: grid; grid-auto-flow: column;gap: 8px 12px; margin-top: 8px; }
.la-sc-checks label { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px var(--la-font);
  color: var(--la-ink-2); cursor: pointer; }
.la-sc-checks input[type=checkbox] { accent-color: var(--la-primary); width: 15px; height: 15px; cursor: pointer; }

/* ---- embedding label in header ---- */
.la-tr-emblabel {
  font: 600 12px var(--la-font);
  color: var(--la-primary);
  background: var(--la-bg-soft);
  border: 1px solid var(--la-line);
  border-radius: 8px;
  padding: 5px 12px;
  margin-left: 6px;
}

/* ---- point-size slider ---- */
.la-symslider {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--la-muted);
  background: var(--la-bg-soft);
  border: 1px solid var(--la-line);
  border-radius: 10px;
  padding: 6px 12px;
}
.la-symslider i {
  color: var(--la-primary);
  opacity: .75;
  font-size: 11px;
}
.la-symslider input[type=range] {
  width: 92px;
  accent-color: var(--la-primary);
  cursor: pointer;
}

/* aside z-index to keep dropdown over chart */
.la-tool-aside { z-index: 49; }
.la-tool-main { position: relative; z-index: 1; }

/* ---- responsive ---- */
@media (max-width: 980px) {
  #trChart { height: 500px; }
  #trDataset + .ts-wrapper .ts-dropdown { width: 100%; }
}

/* 控件本体 */
#trDataset + .ts-wrapper .ts-control,
#trCellType + .ts-wrapper .ts-control,
#trColorBy + .ts-wrapper .ts-control,
#trMethod + .ts-wrapper .ts-control {           /* ← 新增 */
  min-height: 34px; padding: 8px 32px 8px 14px; font-size: 13.5px;
  border-radius: 10px; border: 1px solid var(--la-line); cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* hover */
#trDataset + .ts-wrapper .ts-control:hover,
#trCellType + .ts-wrapper .ts-control:hover,
#trColorBy + .ts-wrapper .ts-control:hover,
#trMethod + .ts-wrapper .ts-control:hover {     /* ← 新增 */
  background-color: var(--la-bg-tint, rgba(67, 56, 202, 0.04));
  border-color: rgba(67, 56, 202, 0.4);
}

/* chevron 箭头 */
#trDataset + .ts-wrapper.single::after,
#trCellType + .ts-wrapper.single::after,
#trColorBy + .ts-wrapper.single::after,
#trMethod + .ts-wrapper.single::after {         /* ← 新增 */
  /* ……原内容不变…… */
}

/* 展开时箭头翻转 */
#trDataset + .ts-wrapper.single.dropdown-active::after,
#trCellType + .ts-wrapper.single.dropdown-active::after,
#trColorBy + .ts-wrapper.single.dropdown-active::after,
#trMethod + .ts-wrapper.single.dropdown-active::after {   /* ← 新增 */
  transform: translateY(-35%) rotate(135deg);
  border-color: var(--la-primary);
}

#trDataset + .ts-wrapper.single .ts-control,
#trCellType + .ts-wrapper.single .ts-control,
#trColorBy + .ts-wrapper.single .ts-control,
#trMethod + .ts-wrapper.single .ts-control { flex-wrap: nowrap; overflow: hidden; padding-right: 28px; }
#trDataset + .ts-wrapper.single .ts-control > .item,
#trCellType + .ts-wrapper.single .ts-control > .item,
#trColorBy + .ts-wrapper.single .ts-control > .item,
#trMethod + .ts-wrapper.single .ts-control > .item {
  flex: 0 1 auto; min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}