/* chart.rules_strip.css - Rules strip displayed inside the chart header area.
   Shows the active screener conditions as read-only chips so the trader can
   see the strategy context while viewing and drawing on the chart.
   Concern: layout and chip styles for #chartRulesStrip only.
   All colors use design tokens. No hardcoded hex. No Arabic characters. */

/* --- Container row (appended to #chartHeader) ----------------------- */
#chartRulesStrip {
  display: none; /* shown by chart.rules_strip.js when rules are present */
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  padding: 5px var(--space-4, 16px);
  border-top: 1px solid var(--color-border, var(--border-2));
  background: var(--color-bg-elev, var(--bg-3));
  min-height: 32px;
  overflow: hidden;
}

#chartRulesStrip.crs-visible {
  display: flex;
}

/* Label prefix */
.crs-label {
  font-size: var(--font-size-xs, 0.65rem);
  color: var(--color-text-3, var(--text-3));
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-right: 4px;
}

/* Chips wrapper */
.crs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  flex: 1;
  min-width: 0;
}

/* Individual rule chip - read-only */
.crs-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--color-primary-alpha, rgba(0, 201, 167, 0.08));
  border: 1px solid var(--color-primary-alpha, rgba(0, 201, 167, 0.2));
  font-size: 0.72rem;
  color: var(--color-text, var(--text-1));
  white-space: nowrap;
  line-height: 1.4;
  font-family: var(--font-mono, monospace);
}

/* Operator part inside the chip */
.crs-chip-op {
  color: var(--color-primary, var(--accent));
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
}

/* Empty state */
.crs-empty {
  font-size: var(--font-size-xs, 0.65rem);
  color: var(--color-text-muted, var(--text-3));
  font-style: italic;
}