/* CRT layer — shared by /chart (Lite) and /tv (Advanced). */

/* --- markers on the advanced chart (DOM overlay inside #evtLayer) --- */
.evt.crt {
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
}
.evt.crt.bull { border-bottom: 11px solid #26c281; transform: translate(-50%, 4px); }
.evt.crt.bear { border-top: 11px solid #ef5350; transform: translate(-50%, -100%) translateY(-4px); }
.evt.crt.dim { opacity: .28; }

/* --- settings panel (same on both pages) --- */
.crt-wrap { position: relative; display: inline-block; }
.crt-btn {
  font: 12px/1 "Segoe UI", system-ui, sans-serif; color: #d7dde6; cursor: pointer;
  white-space: nowrap;      /* "CRT 61/942" must stay on one line in the scroller */
  background: rgba(30, 33, 40, .9); border: 1px solid #363a45; border-radius: 6px; padding: 5px 8px;
}
.crt-btn:hover { border-color: #f7b32b; }
.crt-btn.off { color: #6b7480; }
.crt-count { color: #f7b32b; }

.crt-panel {
  display: none; position: absolute; right: 0; top: calc(100% + 5px); z-index: 3000;
  width: 262px; padding: 9px 11px; text-align: left;
  background: #1b1f27; border: 1px solid #363a45; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
  font: 12px/1.5 "Segoe UI", system-ui, sans-serif; color: #d7dde6;
}
.crt-panel.open { display: block; }
/* reset host-page label chrome (#nav label on /tv, header styles on /chart) */
.crt-panel .crt-row {
  display: block; margin: 3px 0; white-space: nowrap;
  background: none; border: 0; border-radius: 0; padding: 0;
  font: 12px/1.5 "Segoe UI", system-ui, sans-serif; color: #d7dde6;
}
.crt-row input[type="number"] {
  width: 52px; margin: 0 3px; padding: 1px 4px;
  background: #0d1117; color: #d7dde6; border: 1px solid #363a45; border-radius: 4px;
  font: 12px/1.4 "Segoe UI", system-ui, sans-serif;
}
.crt-sep { height: 1px; background: #2b3038; margin: 7px 0; }
.crt-stat { margin-top: 7px; color: #8b96a5; font-size: 11px; white-space: normal; }

/* --- mobile: anchor the panel to the viewport so it can't run off-screen --- */
@media (max-width: 640px) {
  .crt-panel {
    position: fixed; left: 8px; right: 8px; width: auto;
    top: auto; bottom: 8px; max-height: 70vh; overflow-y: auto;
  }
  .crt-panel .crt-row { white-space: normal; margin: 6px 0; }
  .crt-row input[type="number"] { width: 64px; padding: 4px 6px; }
}

/* Touch devices: `title` tooltips never appear and the markers would swallow
   drags meant to pan the chart. */
@media (hover: none) {
  .evt.crt { pointer-events: none; }
}