/* Self-hosted OFL font. No request to the reference screener or a font CDN. */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/vendor/fonts/nunito-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/vendor/fonts/nunito-sans-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

.chart-volume-legend {
  contain: layout style paint;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 5px;
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 1px 3px;
  border-radius: 2px;
  overflow: hidden;
  background: color-mix(in srgb, var(--chart-legend-background, var(--surface)) 90%, transparent);
  color: var(--chart-legend-text, var(--muted-strong));
  font: var(--chart-legend-font-size, 9px)/1.25 var(--chart-legend-font-family, var(--font-mono));
  white-space: nowrap;
  pointer-events: none;
}

.chart-volume-legend__value { font-variant-numeric: tabular-nums; }
.chart-volume-legend__unit { opacity: 0.8; }

.signal-card {
  cursor: pointer;
}

.signal-item.has-open-chart .signal-card {
  background: var(--surface-hover);
}

.signal-chart {
  min-width: 0;
  padding: 5px 8px 3px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.signal-chart__toolbar {
  display: flex;
  min-height: 24px;
  align-items: center;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  gap: 8px;
}

.signal-chart__title {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signal-chart__title .exchange-label__text {
  color: inherit;
}

.signal-chart__timeframe {
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted-strong);
  font-weight: 700;
}

.signal-chart__ban {
  display: inline-flex;
  flex: 0 0 30px;
  width: 30px;
  height: 19px;
  min-height: 19px;
  min-width: 30px;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 750;
  line-height: 1;
}

.signal-chart__temporary-ban {
  border: 1px solid color-mix(in srgb, var(--negative) 55%, var(--border));
  color: var(--negative);
}

.signal-chart__temporary-ban:hover,
.signal-chart__temporary-ban:focus-visible {
  background: var(--negative-bg);
}

.signal-chart__permanent-ban {
  border: 1px solid color-mix(in srgb, var(--warning) 70%, var(--border));
  color: var(--warning);
}

.signal-chart__permanent-ban:hover,
.signal-chart__permanent-ban:focus-visible {
  background: var(--warning-bg);
}

.signal-chart__ban:disabled {
  cursor: wait;
  opacity: 0.65;
}

.signal-chart__status {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signal-chart[data-state="error"] .signal-chart__status {
  color: var(--negative);
}

.signal-chart[data-state="quality-warning"] .signal-chart__status {
  color: var(--warning);
}

.signal-chart__viewport {
  position: relative;
  width: 100%;
  height: clamp(210px, 34vh, 310px);
  min-height: 210px;
  overflow: hidden;
}

/*
 * The page itself uses CSS zoom to reproduce browser-style reflow. The chart
 * canvas is inversely zoomed inside a clipped viewport so its DOM and pointer
 * coordinate systems stay identical at every saved page scale.
 */
.signal-chart__canvas {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  zoom: var(--dashboard-page-zoom-inverse, 1);
  transform-origin: top left;
}

@supports not (zoom: 1) {
  .signal-chart__canvas {
    zoom: 1;
    transform: scale(var(--dashboard-page-zoom-inverse, 1));
  }
}

.signal-chart__canvas.is-measuring {
  cursor: crosshair;
}

.chart-ruler {
  position: absolute;
  z-index: 12;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.chart-ruler__selection {
  position: absolute;
  border: 1px dashed var(--accent);
  background: rgb(60 141 222 / 10%);
}

.chart-ruler__line {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  overflow: visible;
}

.chart-ruler__line line {
  stroke: var(--accent);
  stroke-width: 1.5;
}

.chart-ruler__label {
  position: absolute;
  max-width: calc(100% - 8px);
  padding: 3px 6px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 0 2px 8px rgb(0 0 0 / 24%);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.chart-ruler__label[data-placement="above"] {
  transform: translateY(-100%);
}
@media (max-width: 520px) {
  .signal-chart {
    padding-inline: 4px;
  }

  .signal-chart__viewport {
    height: 220px;
  }
}