/* Trajectory workspace: selection, display settings, and the figure. */
#trajectory-panel .trajectory-controls {
  display: block;
  padding: 12px 16px;
  margin-bottom: 12px;
  border: 1px solid #d8dfe5;
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
}
.trajectory-query-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; }
.trajectory-gene-group { flex: 1 1 300px; max-width: 680px; min-width: 0; }
.trajectory-celltype-group { flex: 0 0 auto; }
.trajectory-input-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 12px; }
#trajectory-panel .trajectory-control-label { display: block; margin: 0 0 5px; color: #46515b; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0; text-transform: none; }
#trajectory-gene-help { margin-bottom: 5px; color: #66737e; font-size: 12px; line-height: 16px; }
.trajectory-gene-entry { display: flex; align-items: stretch; gap: 6px; }
#trajectory-panel #trajectory-gene { flex: 1 1 auto; min-width: 0; max-width: none; width: 100%; height: var(--pec-control-height); padding: 5px 9px; border: 1px solid var(--pec-control-border); border-radius: 4px; font: 13px/20px Arial, Helvetica, sans-serif; box-shadow: none; }
#trajectory-panel .btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: 0 0 auto; width: auto; min-height: var(--pec-control-height); height: var(--pec-control-height); padding: 5px 10px; border-radius: 4px; font-size: 13px; font-weight: 400; line-height: 20px; }
#trajectory-panel .btn-primary { background: #245580; border-color: #245580; color: #fff; }
#trajectory-panel .btn-primary:hover { background: #1b456a; }
#trajectory-panel .btn-default { border-color: var(--pec-control-border); }
#trajectory-panel .btn:disabled { opacity: .5; cursor: default; }
#trajectory-panel .trajectory-legend { display: flex; width: auto; min-height: var(--pec-control-height); padding: 0; gap: 6px; background: transparent; border: 0; border-radius: 0; }
#trajectory-panel .trajectory-legend-item { display: inline-flex; align-items: center; gap: 6px; min-height: var(--pec-control-height); margin: 0; padding: 5px 9px; border: 1px solid var(--pec-control-border); border-radius: 4px; color: #46515b; background: #fff; font-size: 13px; font-weight: 400; line-height: 20px; box-shadow: none; }
#trajectory-panel .trajectory-legend-item:has(input:checked) { background: #edf1f5; border-color: #a6b3bf; color: #26323c; }
#trajectory-panel .trajectory-legend-item:not(:has(input:checked)) .trajectory-legend-dot { opacity: .35; }
#trajectory-panel .trajectory-legend-item input, #trajectory-panel .trajectory-option input { position: static; opacity: 1; pointer-events: auto; flex: 0 0 13px; width: 13px; height: 13px; margin: 0; accent-color: #465c70; }
.trajectory-display-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #e5e9ed; }
.trajectory-age-control { display: flex; align-items: center; gap: 10px; }
#trajectory-panel .trajectory-age-control .trajectory-control-label { margin: 0; white-space: nowrap; }
#trajectory-panel .trajectory-scale-options { display: inline-flex; flex-wrap: nowrap; width: auto; gap: 2px; min-height: var(--pec-control-height); padding: 2px; border: 1px solid var(--pec-control-border); border-radius: 4px; background: #f5f7f9; }
#trajectory-panel .trajectory-scale-options label { display: inline-flex; align-items: center; justify-content: center; min-height: calc(var(--pec-control-height) - 6px); margin: 0; padding: 2px 8px; border: 1px solid transparent; border-radius: 2px; font-size: 13px; font-weight: 400; line-height: 20px; white-space: nowrap; }
#trajectory-panel .trajectory-scale-options label:has(input:checked) { background: #fff; border-color: #c8d0d8; color: #26323c; box-shadow: none; }
.trajectory-option { display: inline-flex; align-items: center; gap: 7px; min-height: var(--pec-control-height); margin: 0; color: #344250; font-size: 13px; font-weight: 400; line-height: 20px; cursor: pointer; }
#trajectory-panel input:focus-visible, #trajectory-panel .btn:focus-visible { outline: 2px solid #4988bb; outline-offset: 2px; }
#trajectory-status { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid #8ca8bf; background: #f0f5f9; color: #344250; font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
#trajectory-status:empty { display: none; }
#trajectory-status[data-tone="warning"], #trajectory-status[data-tone="error"] { border-color: #c49c55; background: #fff8e8; color: #75551d; }
.trajectory-results { overflow: hidden; border: 1px solid #d8dfe5; border-radius: 4px; background: #fff; }
.trajectory-figure-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 16px; border-bottom: 1px solid #e5e9ed; }
.trajectory-figure-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.trajectory-figure-heading h2 { margin: 0; color: #26323c; font-size: 14px; font-weight: 600; line-height: 20px; }
#trajectory-summary { color: #66737e; font-size: 12px; line-height: 18px; }
#trajectory-panel .trajectory-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; width: auto; min-height: var(--pec-control-height); }
.trajectory-export-label { margin-right: 4px; color: #66737e; font-size: 12px; }
#trajectory-panel .trajectory-plot-frame { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 0; border-radius: 0; background: #fff; }
#trajectory-panel #trajectory-plot { min-width: 1000px; min-height: 420px; border: 0; border-radius: 0; }
#trajectory-panel #trajectory-plot[aria-busy="true"] { opacity: .55; }
.trajectory-results [hidden] { display: none !important; }
.trajectory-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 220px; padding: 32px 20px; text-align: center; }
.trajectory-empty strong { color: #344250; font-size: 15px; font-weight: 600; }
.trajectory-empty p { max-width: 460px; margin: 8px 0 0; color: #66737e; font-size: 13px; line-height: 1.5; }
.trajectory-figure-guide { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 10px 16px; border-top: 1px solid #e5e9ed; color: #586774; font-size: 12px; line-height: 18px; }
.trajectory-figure-guide > span { display: inline-flex; align-items: center; gap: 7px; }
.trajectory-figure-guide i { display: inline-block; flex: 0 0 auto; }
.trajectory-key-point { width: 6px; height: 6px; margin: 0 5px; border-radius: 50%; background: #667d90; }
.trajectory-key-line { width: 16px; height: 2px; background: #667d90; }
.trajectory-key-band { width: 16px; height: 10px; border-top: 4px solid #dce5ec; border-bottom: 4px solid #dce5ec; background: #667d90; }
#trajectory-panel .trajectory-scroll-hint { display: none; margin: 0; padding: 7px 16px; color: #66737e; font-size: 12px; line-height: 18px; background: #fafbfc; border-bottom: 1px solid #edf0f3; }
@media (max-width: 1050px) {
  #trajectory-panel .trajectory-scroll-hint { display: block; }
}
@media (max-width: 640px) {
  #trajectory-panel .trajectory-controls { padding: 12px; }
  .trajectory-gene-group { flex-basis: 100%; }
  #trajectory-panel #trajectory-gene { font-size: 16px; }
  .trajectory-display-row { gap: 6px 16px; }
  .trajectory-age-control { flex-basis: 100%; justify-content: space-between; }
  .trajectory-figure-toolbar, .trajectory-figure-guide { padding: 10px 12px; }
  .trajectory-figure-heading { flex-basis: 100%; }
  #trajectory-panel .trajectory-actions { margin-left: auto; }
  #trajectory-panel .trajectory-scroll-hint { padding-left: 12px; padding-right: 12px; }
}