/* Vivid Trend skin. NO HEX IN THIS FILE (charter rule 1): every colour is a
   --vt-* token the consumer sets, the same contract vivid-table follows.
   Tokens used here: --vt-dim, --vt-ink, --vt-accent, --vt-line-alt. */

.vt-trend-steer { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; }
.vt-trend-lbl { font-size: 0.76rem; font-weight: 700; color: var(--vt-dim); white-space: nowrap; }
.vt-trend-steer input[type="range"] { flex: 1; min-width: 120px; accent-color: var(--vt-accent); cursor: pointer; }
.vt-trend-win { font-size: 0.76rem; font-weight: 700; color: var(--vt-ink); white-space: nowrap; min-width: 74px; text-align: right; }

.vt-trend-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; font-size: 0.76rem; color: var(--vt-dim); align-items: center; }
.vt-trend-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 6px; }
/* A line in the legend is drawn as a line, so the reader can tell a bar
   series from a trend line without reading the words twice. */
.vt-trend-legend i.vt-rule { width: 14px; height: 3px; border-radius: 2px; vertical-align: 2px; }
.vt-trend-legend i.vt-dash { height: 0; background: none; border-top: 3px dashed var(--vt-line-alt); border-radius: 0; }

.vt-trend-note { margin-top: 8px; font-size: 0.72rem; color: var(--vt-dim); line-height: 1.5; }