/* The object tree panel, docked to the left of the chart.
 *
 * Its own stylesheet for the same reason picker.css and replay.css are: style.css and windows.css
 * are being restyled by a parallel session. Scoped to .objpanel and .ot-*.
 */

.objpanel {
  display: flex;
  flex-direction: column;
  width: 226px;
  flex: 0 0 auto;
  min-height: 0;
  background: var(--panel);
  border-right: 1px solid var(--line);
  font: var(--t-sm) var(--ui);
  color: var(--ink-dim);
}
.objpanel[hidden] { display: none; }

.ot-head {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 6px 0 9px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.ot-title { flex: 1 1 auto; color: var(--ink); font-size: var(--t-sm); }

.ot-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;   /* the list must not hand its scroll to the chart */
}

.ot-empty {
  padding: 12px 10px;
  color: var(--ink-faint);
  font-size: var(--t-xs);
  line-height: 1.5;
}

.ot-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 6px 5px 9px;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.ot-row:hover { background: var(--panel-2); }
.ot-row.on { background: var(--sel); }

.ot-dot {
  width: 3px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 2px;
}

/* The name and its location stack, so a narrow panel does not have to choose between them: the
   name says WHAT, and the price and time say WHICH - two rectangles are indistinguishable without
   the second line. */
.ot-label {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ot-name {
  color: var(--ink);
  font-size: var(--t-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ot-where {
  color: var(--ink-faint);
  font: var(--t-xs) var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The row's controls stay out of the way until the row is under the cursor, because three
   permanent icons per row turn a list of drawings into a list of buttons. The selected row keeps
   them, since that is the row being worked on. */
.ot-btn {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  opacity: 0;
}
.ot-row:hover .ot-btn,
.ot-row.on .ot-btn,
.ot-btn.on,
.ot-btn:focus-visible { opacity: 1; }
.ot-head .ot-btn { opacity: 1; }
.ot-btn:hover { background: var(--panel-3); color: var(--ink); }
.ot-btn.on { color: var(--ink-dim); }
.ot-del:hover { color: var(--sell-hi); background: rgba(226, 84, 73, .12); }

.ot-foot {
  flex: 0 0 auto;
  padding: 7px 9px;
  border-top: 1px solid var(--line);
}
.ot-clear {
  width: 100%;
  height: 24px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--ink-dim);
  font: var(--t-sm) var(--ui);
  cursor: pointer;
}
.ot-clear:hover:not(:disabled) {
  color: var(--sell-hi);
  border-color: var(--sell);
  background: var(--panel-3);
}
.ot-clear:disabled { opacity: .4; cursor: default; }

/* The rail has two blocks and a foot: tools, plugins, and the object tree pinned to the bottom.
   The spacer is what pins it, and it must not collapse when the rail is short. */
.rail-grow { flex: 1 1 auto; min-height: 8px; }
.rail-obj {
  flex: 0 0 auto;
  height: 28px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rail-obj:hover { color: var(--ink); background: var(--panel-2); }
.rail-obj.on { color: var(--ink); background: var(--sel); }